This content compares Bootstrap and Tailwind CSS, guiding users on when to choose each framework, or neither, based on their CSS proficiency and project needs. It emphasizes the importance of understanding core CSS before adopting any framework.
Mind Map
Expand करने के लिए click करें
पूरा interactive mind map देखने के लिए click करें
now people are excited a lot about
tailwinds just in time compilation mode
which allows you to put arbitrary styles
inside alongside of your tailwind styles
which is absolutely crazy and it's a
great piece of technology and software
hey everyone welcome back and in this
video i want to discuss an interesting
topic which a lot of people who are new
to css frameworks and utilities ask that
is what is the difference between
bootstrap and tailwind and what you
should go with your first project your
nth project which one should you choose
basically so in this video let's discuss
a step-by-step breakdown of what these
two things are when you should be
figuring out you should use bootstrap
when you should be figuring out you
should use tailwind and when you should
be using none let's go if you're new
here make sure you leave a like
subscribe to the channel and hit the
bell icon this is free of cost and helps
the channel grow let's start with when
you should be using none of these well
the answer for that is very very simple
if you are not confident with css the
language itself if you're not able to
write basic classes and ids and style
them give a little bit of layout you
know arrange elements in a flexbox or
even in a great format and figure out
how you can create a particular layout
in a specific way maybe just going a
little bit ahead and also trying to
convert things into responsive design if
you cannot do all of this then it is not
the time to pick a framework or a css
library like bootstrap or tailwind that
is absolutely not the time if you are
starting with any video or any tutorial
which tells you to learn html and then
directly shift to tailwind or bootstrap
or any other css framework they're
probably doing it wrong i sincerely
believe that in order to use these
solutions you should still know how css works
works
internally right you should be able to
write proper css you should be able to
make sure you are understanding what you
are writing and you should be able to do
a lot of common operations with it so
for those of you who now have a little
bit of experience with css and can work
your way around let's understand what is
the difference between
tailwind and bootstrap and which one
should you pick so starting with
bootstrap you can see that bootstrap is
actually a ui kit css framework and
tailwind on the other hand is a utility
first css framework so what is the
difference the difference is ui stands
for user interface that means bootstrap
gives you complete user interface itself
now when i say that if i go to
documentation and start seeing inside
components what you will see is if i have
have
these alerts i mean alerts is fine but
let's take a look at these collapse for
example so you can see i have actual
buttons which collapse and you know just
just makes the text visible and
invisible again and again similarly for
horizontal we have different animation
styles animation methods and you can see
that it's not really a css framework as
well it does involve a lot of javascript
right so bootstrap is not just css it is
actually a complete ui framework like i
said that means it can involve a bunch
of javascript as well you can see we
have an accordion widget as well which
is a very common use case right if you
are creating a website with an faq or
some sort of area where you want these
accordions to appear you might want to
have that tailwind on the other hand
like i said is a utility first css
framework this means what tailwind is
really doing is that it's trying to
restrict the scope of css it's trying to
restrict what you can do with css and
i'm going to tell you how it does that
it does that in the way that it gives you
you
very good defaults available out of the
box let's take a look at padding for
example in tailwind you can see that
tailwind what it does it gives you a lot
of default classes available now you can
see right here that we have certain
values for class p0 is padding zero this
is padding one pixel then we just go
into rims right now the good thing about
this is that there is padding four and
padding 5 and you have 1 and 1.25 what
you can do or what you should be doing
as a developer is that if you are
creating a ui yourself you just use a
padding for every other widget you are
using on the site so what it does it
makes your styles a bit consistent right
and when you're doing this
this gets applied and if you want to
change this to a maybe a different value
altogether you can overwrite that using
the tailwind configuration as well so i
do believe like more than anything what
tailwind does best is it restricts the
scope of css which allows you to not
just be hacking with values all the time
so instead of like having a 10 pixel
padding there then a 7 pixel here and 2
pixels there and trying to figure out
the margins you have these set classes
which can be used and this is also like
no longer true really with the tailwind
just in time that's a different story
but for now the inbuilt classes the
inbuilt things you can see first of all
they have the advantage that they can
directly be applied to the element so
you don't have to manage a class name
and then go to the element and then
write the class name and then do it so
it's technically not in line css but also
also
is kind of so you don't have to worry
about that and second of all like i said
it restricts you in a certain value
domain right certain things which you
can use and it just kind of makes things
a little bit more easier symmetrical for
a lack of better word while you're
applying styles while you're applying
layouts and stuff so you can see with
shadows again this is one thing which is
tricky for a lot of people is what is a
good way to give shadows to the elements
right so tailwind defines certain
classes which have really nice shadows
if you want to
lift the element a lot you use a large
shadow if you just want to lift it a
little you use a smaller shadow but
these defaults have been put in place
for you right you don't have to worry
about what should be the shadow and you
know for a little lift little more
little more and so on right so this is
not something you have to worry about
similarly for inner shadow what are some
same defaults but because if you have
used css you know that these values can
take so many values i mean the box
shadow would be able to take the
the
x offset the y offset the amount of
shadow the color this and that so sure
if you want to go down that route you
are most welcome to do that but if you
are somebody who just wants to get
started with a project with some sane
default values like i have been saying
this is your choice now people are
excited a lot about tailwinds just in
time compilation mode which allows you
to put arbitrary styles inside alongside
of your tailwind styles which is
absolutely crazy and it's a great piece
of technology and software but i do
believe that you should not be using
tailwind css if you only intend to use
it for the jit part right because this
is basically just writing css at this
point it's basically just writing css
because you're just doing x values or
you're doing some custom width and
heights and this is maybe just a little
smaller syntax but if you are just
trying to use it like this like this
example where they have pretty much just
written all the arbitrary values and
that's all you do in a project you
should probably just consider using a
regular css right so this is like
another case of not using any sort of
framework so if you're doing anything
which involves a little bit of you want
to have some same defaults and you know
that you would be using some same
defaults provided by tailwind then you
should absolutely go ahead and use it
alright so the big question now is what
do you use bootstrap or tailwind well
this is
a subjective question to be honest and i
would prefer that you try out both of
them first and see which one fits better
with your flow now for example bootstrap
is awesome you will be able to bootstrap
literally a lot of websites directly
without spending a lot of time you would
get headers and photos and sections and
this and that but if you're trying to
play with css in a decent manner and you
also want to build something interesting
and something which does not look like
every other website might be using then
tailwind might also be an interesting
choice right and tailwind does have a
component level solution as well there
is tailwind ui it is a bit expensive but
if you want you can consider this but
it's like it's it's relatively expensive
but they just give you all these
components right which are for example
if i open this you see right here is
also the code for tailwind this page
right here which has been completely
built with tailwind so they have like a
component level thing going on as well
for them just like bootstrap it is paid
however so i would recommend you to use
css tailwind css if you want to stay
closer with css when you're working
which is usually a good idea when you're
trying to build something unique and
which you know you would be working for
a long time for something which you need
to bootstrap literally very quickly
overnight in a couple of days on a
weekend then i think bootstrap is a
great place to start as well there is no
right or wrong answer here i think this
is in today's time it is more about
preference compared to
what should be the real standard but in
general you should not be starting any
of them if you are not comfortable with
css itself with that being said you
should check out code dam's full stack
learning path which does start with html
and css basics and we do cover tailwind
in that learning path as well as our
primary choice for learning a css
framework right you would find all the
links in the description but yeah let me
know what you think about this bootstrap
versus tailwind which one you have used
the most and which one do you prefer or
would advise other people to use and why
that is all for this video make sure you
leave a like and subscribe to the
channel i'm gonna see you in the next
video really soon if you're still
watching this video make sure you
comment down in the comment section i
watched this video till the end also if
you're not part of code dam's discord
community you are missing out a lot on
events which we organize on a weekly
basis to code you already know the drill
make sure you like the video subscribe
to the channel if you haven't already
Video के उस moment पर जाने के लिए कोई भी text या timestamp click करें
Share करें:
ज्यादातर transcripts 5 सेकंड से कम में तैयार
एक Click में Copy125+ भाषाएंContent Search करेंTimestamps पर जाएं
YouTube URL Paste करें
कोई भी YouTube video link डालें और पूरा transcript पाएं
Transcript निकालें
ज्यादातर transcripts 5 सेकंड से कम में तैयार
हमारा Chrome Extension लें
YouTube छोड़े बिना transcript तुरंत पाएं। हमारा Chrome extension install करें और watch page पर ही किसी भी video का transcript one-click में access करें।
