0:02 now people are excited a lot about
0:04 tailwinds just in time compilation mode
0:07 which allows you to put arbitrary styles
0:10 inside alongside of your tailwind styles
0:12 which is absolutely crazy and it's a
0:14 great piece of technology and software
0:16 hey everyone welcome back and in this
0:18 video i want to discuss an interesting
0:21 topic which a lot of people who are new
0:25 to css frameworks and utilities ask that
0:26 is what is the difference between
0:29 bootstrap and tailwind and what you
0:32 should go with your first project your
0:33 nth project which one should you choose
0:35 basically so in this video let's discuss
0:37 a step-by-step breakdown of what these
0:39 two things are when you should be
0:41 figuring out you should use bootstrap
0:42 when you should be figuring out you
0:45 should use tailwind and when you should
0:47 be using none let's go if you're new
0:48 here make sure you leave a like
0:50 subscribe to the channel and hit the
0:52 bell icon this is free of cost and helps
0:54 the channel grow let's start with when
0:56 you should be using none of these well
0:58 the answer for that is very very simple
1:02 if you are not confident with css the
1:04 language itself if you're not able to
1:06 write basic classes and ids and style
1:08 them give a little bit of layout you
1:10 know arrange elements in a flexbox or
1:12 even in a great format and figure out
1:14 how you can create a particular layout
1:17 in a specific way maybe just going a
1:19 little bit ahead and also trying to
1:21 convert things into responsive design if
1:23 you cannot do all of this then it is not
1:27 the time to pick a framework or a css
1:29 library like bootstrap or tailwind that
1:32 is absolutely not the time if you are
1:34 starting with any video or any tutorial
1:36 which tells you to learn html and then
1:39 directly shift to tailwind or bootstrap
1:41 or any other css framework they're
1:43 probably doing it wrong i sincerely
1:46 believe that in order to use these
1:50 solutions you should still know how css works
1:51 works
1:52 internally right you should be able to
1:55 write proper css you should be able to
1:57 make sure you are understanding what you
1:58 are writing and you should be able to do
2:00 a lot of common operations with it so
2:02 for those of you who now have a little
2:04 bit of experience with css and can work
2:07 your way around let's understand what is
2:08 the difference between
2:10 tailwind and bootstrap and which one
2:12 should you pick so starting with
2:15 bootstrap you can see that bootstrap is
2:18 actually a ui kit css framework and
2:21 tailwind on the other hand is a utility
2:23 first css framework so what is the
2:26 difference the difference is ui stands
2:29 for user interface that means bootstrap
2:32 gives you complete user interface itself
2:33 now when i say that if i go to
2:36 documentation and start seeing inside
2:38 components what you will see is if i have
2:39 have
2:41 these alerts i mean alerts is fine but
2:44 let's take a look at these collapse for
2:48 example so you can see i have actual
2:52 buttons which collapse and you know just
2:54 just makes the text visible and
2:56 invisible again and again similarly for
2:58 horizontal we have different animation
3:00 styles animation methods and you can see
3:03 that it's not really a css framework as
3:05 well it does involve a lot of javascript
3:08 right so bootstrap is not just css it is
3:10 actually a complete ui framework like i
3:13 said that means it can involve a bunch
3:15 of javascript as well you can see we
3:18 have an accordion widget as well which
3:20 is a very common use case right if you
3:23 are creating a website with an faq or
3:25 some sort of area where you want these
3:27 accordions to appear you might want to
3:29 have that tailwind on the other hand
3:32 like i said is a utility first css
3:34 framework this means what tailwind is
3:36 really doing is that it's trying to
3:40 restrict the scope of css it's trying to
3:42 restrict what you can do with css and
3:44 i'm going to tell you how it does that
3:46 it does that in the way that it gives you
3:47 you
3:51 very good defaults available out of the
3:53 box let's take a look at padding for
3:55 example in tailwind you can see that
3:58 tailwind what it does it gives you a lot
4:01 of default classes available now you can
4:03 see right here that we have certain
4:06 values for class p0 is padding zero this
4:08 is padding one pixel then we just go
4:11 into rims right now the good thing about
4:13 this is that there is padding four and
4:16 padding 5 and you have 1 and 1.25 what
4:18 you can do or what you should be doing
4:20 as a developer is that if you are
4:23 creating a ui yourself you just use a
4:25 padding for every other widget you are
4:27 using on the site so what it does it
4:30 makes your styles a bit consistent right
4:32 and when you're doing this
4:34 this gets applied and if you want to
4:37 change this to a maybe a different value
4:39 altogether you can overwrite that using
4:41 the tailwind configuration as well so i
4:44 do believe like more than anything what
4:47 tailwind does best is it restricts the
4:49 scope of css which allows you to not
4:52 just be hacking with values all the time
4:54 so instead of like having a 10 pixel
4:56 padding there then a 7 pixel here and 2
4:58 pixels there and trying to figure out
5:01 the margins you have these set classes
5:03 which can be used and this is also like
5:05 no longer true really with the tailwind
5:07 just in time that's a different story
5:10 but for now the inbuilt classes the
5:12 inbuilt things you can see first of all
5:13 they have the advantage that they can
5:15 directly be applied to the element so
5:17 you don't have to manage a class name
5:19 and then go to the element and then
5:21 write the class name and then do it so
5:23 it's technically not in line css but also
5:24 also
5:26 is kind of so you don't have to worry
5:28 about that and second of all like i said
5:31 it restricts you in a certain value
5:33 domain right certain things which you
5:36 can use and it just kind of makes things
5:38 a little bit more easier symmetrical for
5:40 a lack of better word while you're
5:42 applying styles while you're applying
5:44 layouts and stuff so you can see with
5:47 shadows again this is one thing which is
5:49 tricky for a lot of people is what is a
5:51 good way to give shadows to the elements
5:54 right so tailwind defines certain
5:56 classes which have really nice shadows
5:57 if you want to
5:59 lift the element a lot you use a large
6:01 shadow if you just want to lift it a
6:03 little you use a smaller shadow but
6:05 these defaults have been put in place
6:07 for you right you don't have to worry
6:10 about what should be the shadow and you
6:12 know for a little lift little more
6:14 little more and so on right so this is
6:15 not something you have to worry about
6:17 similarly for inner shadow what are some
6:19 same defaults but because if you have
6:21 used css you know that these values can
6:23 take so many values i mean the box
6:25 shadow would be able to take the
6:26 the
6:29 x offset the y offset the amount of
6:31 shadow the color this and that so sure
6:33 if you want to go down that route you
6:37 are most welcome to do that but if you
6:38 are somebody who just wants to get
6:40 started with a project with some sane
6:43 default values like i have been saying
6:45 this is your choice now people are
6:47 excited a lot about tailwinds just in
6:49 time compilation mode which allows you
6:53 to put arbitrary styles inside alongside
6:54 of your tailwind styles which is
6:57 absolutely crazy and it's a great piece
6:59 of technology and software but i do
7:01 believe that you should not be using
7:03 tailwind css if you only intend to use
7:06 it for the jit part right because this
7:09 is basically just writing css at this
7:10 point it's basically just writing css
7:12 because you're just doing x values or
7:14 you're doing some custom width and
7:16 heights and this is maybe just a little
7:18 smaller syntax but if you are just
7:20 trying to use it like this like this
7:22 example where they have pretty much just
7:23 written all the arbitrary values and
7:25 that's all you do in a project you
7:26 should probably just consider using a
7:28 regular css right so this is like
7:31 another case of not using any sort of
7:34 framework so if you're doing anything
7:36 which involves a little bit of you want
7:38 to have some same defaults and you know
7:40 that you would be using some same
7:42 defaults provided by tailwind then you
7:44 should absolutely go ahead and use it
7:46 alright so the big question now is what
7:49 do you use bootstrap or tailwind well
7:50 this is
7:52 a subjective question to be honest and i
7:55 would prefer that you try out both of
7:58 them first and see which one fits better
8:01 with your flow now for example bootstrap
8:03 is awesome you will be able to bootstrap
8:06 literally a lot of websites directly
8:08 without spending a lot of time you would
8:10 get headers and photos and sections and
8:12 this and that but if you're trying to
8:15 play with css in a decent manner and you
8:17 also want to build something interesting
8:19 and something which does not look like
8:22 every other website might be using then
8:24 tailwind might also be an interesting
8:25 choice right and tailwind does have a
8:27 component level solution as well there
8:30 is tailwind ui it is a bit expensive but
8:32 if you want you can consider this but
8:35 it's like it's it's relatively expensive
8:37 but they just give you all these
8:39 components right which are for example
8:41 if i open this you see right here is
8:44 also the code for tailwind this page
8:45 right here which has been completely
8:47 built with tailwind so they have like a
8:50 component level thing going on as well
8:52 for them just like bootstrap it is paid
8:55 however so i would recommend you to use
8:58 css tailwind css if you want to stay
9:00 closer with css when you're working
9:02 which is usually a good idea when you're
9:04 trying to build something unique and
9:06 which you know you would be working for
9:08 a long time for something which you need
9:11 to bootstrap literally very quickly
9:13 overnight in a couple of days on a
9:15 weekend then i think bootstrap is a
9:17 great place to start as well there is no
9:20 right or wrong answer here i think this
9:21 is in today's time it is more about
9:23 preference compared to
9:25 what should be the real standard but in
9:28 general you should not be starting any
9:30 of them if you are not comfortable with
9:32 css itself with that being said you
9:34 should check out code dam's full stack
9:36 learning path which does start with html
9:39 and css basics and we do cover tailwind
9:41 in that learning path as well as our
9:44 primary choice for learning a css
9:45 framework right you would find all the
9:48 links in the description but yeah let me
9:50 know what you think about this bootstrap
9:52 versus tailwind which one you have used
9:54 the most and which one do you prefer or
9:57 would advise other people to use and why
9:59 that is all for this video make sure you
10:00 leave a like and subscribe to the
10:02 channel i'm gonna see you in the next
10:04 video really soon if you're still
10:05 watching this video make sure you
10:07 comment down in the comment section i
10:10 watched this video till the end also if
10:12 you're not part of code dam's discord
10:15 community you are missing out a lot on
10:17 events which we organize on a weekly
10:19 basis to code you already know the drill
10:21 make sure you like the video subscribe
10:22 to the channel if you haven't already
