What is Tailwind? (and why is it awesome?)

hello everybody welcome back to my channel it's so lovely to see you around these parts again today's video i am very excited about i've been wanting to talk about it for a very long time today we were talking about tailwind i feel like we need to have like some wind rustling past to kind of give that uh evocation of speed uh the question to answer today is what is tailwind and also why i think you should be excited about tailwind and maybe use it in your next project it's not a free thing that you can just start picking up immediately and start using there is a learning curve but after having played with it for a couple months now i feel pretty confident in saying that it is a very worthwhile investment so let's get down to the meat of it what is tailwind at its simplest most unhelpful explanation it is a css framework thanks for watching see you next week i'm kidding uh tailwind is a css framework the way that uh rails is a application framework that's actually a horrible metaphor it provides a lot and by a lot i actually mean all styling that you may need to style an application and the thing that's important to understand about how it does that is the way in which it does that tailwind's api is a collection of css class names it follows the methodology called atomic css they also call it utility css but what it boils down to is that per each discrete style that you could apply on a page there is a discrete tailwind class name so checking out its web page you have here these classes like flex pt4 text center you could pretty much guess what text center does if you inspect it in the browser the only styling applied to that class name is text align center and that is both uh the strength of tailwind and also its learning curve is having to learn all these class names atomic css has been around for a while this is a new article i'm sure that's been bumped up since taylon's gained more popularity i mean this is from this is well last week and but there's atomic css has been around for a long time yeah here's an article from 2016. atomic css is not a new concept but tailwind kind of takes it up a notch and makes an entire design language around the api of atomic css now you may be thinking okay that's fine we've had css frameworks around for a long time i mean what about bootstrap it's been around since pretty much the dawn of the internet so why is tailwind so much better than bootstrap i'm so glad you asked first things first bootstrap's kind of in a weird space mostly just due to historical reasons but bootstrap is kind of a hybrid css framework and component library i would actually argue that when it started off it was much more so a component library when i was researching this video it seems like bootstrap's actually trying to shift more towards being a css framework as well because um when i was looking at the docs they actually have a huge array of css utility files that did not exist when i was first learning bootstrap versions one two three so it's gla it's exciting to see them moving to be more modern but again uh they're kind of weighed down i would argue in some ways by just the legacy and history of bootstrap itself but thinking about bootstrap as a component library means that when you use bootstrap components you're thinking on a component basis so what that means is that you're thinking about buttons you're thinking about drop downs you're thinking about nav bars as individual things that you're using from bootstrap this is in contrast to tailwind when you're thinking about spacing so for example how far away should things be from each other colors as a very like basic like here's a palette of colors and the shades that are possible you're thinking about um box sizing but not like a unique box sizing combination of things literally just like do you want box sizing border box or box settings in content box uh or if you want to do z index there's a finite list of classes to set z indexes for elements on your page and what that kind of gives you by thinking more on a lower building block basis with tailwind is much more flexibility and much more control over what your application looks like again bootstrap is just components so you have so when you use a bootstrap button it will always always look like a bootstrap button unless you customize it but who's customizing bootstrap themes nowadays if you want to have a tailwind button you kind of got to build it yourself for example here this other example on the website they have this buy now button and that's actually if you look here it says buy now that's being backed by this long list of tailwind class things which if you've never seen tillam before this looks ridiculous and i was there in your camp as well because at first glance it does look ridiculous but that is really the strength of tailwind looking ridiculous no i'm kidding being flexible but i mean what tillen does provide for you aside from just you know rather than having to write uh justify center here than in just your own custom class name is it has strong default styles um when you install bootstrap i believe that's still the case they have a initial css that kind of resets how things look so they actually have a consistent baseline to apply bootstrap styles on top uh tailwind does the same thing with this thing called preflight it's an opinionated set of base styles for tailwind projects boot strip has its own as well i can't find it but i think it does as well um what's interesting about taylon's approach with preflight is that rather than actually setting default styles to like h1 elements let me find that we do uh components h1 here we go rather than customizing how h1s are on the page to have them just look like bootstrap tailwinds preflight actually strips most styles by default so that essentially every browser that you see tailored in has the same baseline which is nothing at all like if you install a tailwind and you put h1 through h6 on the page they all have the same size it's weird but it's also powerful because then you can start applying class and on top it also means that it's easier to extract a tailwind project because you've applied the class names you want whereas with bootstrap when you have these default styles that are global it becomes very hard to understand where they are but ultimately what tailwind gives you with these collections of crazy class names is strong default styles that are made by somebody who has a better design sense than me uh so what does that mean is that for example they provide out of the box a wonderful color palette which yeah you could do yourself but it's built in that's one thing but also it has uh consistent spacing for everything um which means that there's a whole design token language that works together now this is something if you worked in a big company you you might have been familiar with it so for example with text size or font size there's a given number of classes to a to apply font sizes but they are all in proportion to each other which means that you don't have a small class name to a large class than making a big jump there's a gradual progression they all work in harmony with each other so that means that if you do use tailwind class styles together correctly they usually end up looking nice on the page which i am in such strong need of also frankly it doesn't make the page no two-tailing projects will by default look the same it's very easy to tell when a project is is using bootstrap and frankly at this age of the internet it pains me to see a bootstrap web location it's just it's a little just like it's it's old it's past dated i i definitely understand why and like do not blame anybody for using it because i've definitely done it in the past but at this time if i'm trying to make something that i own i don't want it to just look like bootstrap and that's the real strength of tailwind is that it actually has just a vanilla tool kit that you can use to make your own house so the analogy here is bootstrap gives you rooms pre-made gives you a bedroom gives you a kitchen and you can put them in different configurations but like you still know that's a bootstrap kitchen that's a bootstrap bedroom uh tailwind on the other hand gives you the individual pieces they give you it gives you a tailwind doorknob gives you a tailwind coat of paint it gives you a tailwind floor and you can kind of combine these into any combination to make your own harry's kitchen which is the name of my new album coming out this fall full of peanut butter and jelly okay enough about what tailwind is and how it works i think you kind of have the theory strong enough at this point uh let me jump into a demo can i show you how i've applied tailwind uh to an application that i've built uh there's this thing i made called vodiupy it's a way for people to vote on video ideas they want me to make for this video i have another video about it so if you want to hear about it more check out that video linked down below um but i used tailwind for this project this is an entirely tailwind back project and i want to kind of give you a tour of like how i've used tailwind to make this awesome uh before i jump in though one thing that i may set must say is that uh a tailwind is hard to learn because there's all these esoteric class names you have to learn i've memorized some some i haven't uh tailwind does have a nice you know quick search so i can look for for example spacing uh to see uh to quickly jump to a page for documentation but that's actually pretty disruptive when i'm actually coding so instead like all good developer tools there's additional developer tools to make my developer tools better and that's in the way of this vs code plugin called til1 css intellisense that kind of gives you a drop down to give it gives you both autocomplete and shows you what the class name does so you can understand what you're doing to the page uh it's invaluable both to learn tailwind but also just to develop tailwind like it's if you're trying out tailwind and you're using vs code install this extension you'll have a much happier time when learning tailwind so first i want to show you a very simple example is the uh about page here so i have this about page has a profile over here and if you see over here some of the class names are you know more or less intuitive and some aren't like this is flex so if i hover over it with my intellisense you can see it says display flex this mb4 is confusing but i hover over it i see that's margin bottom there's all these mb4 if i go here i can actually show you how um there's there are conventions to these class names so here's there's m0 for no margin margin two is the token size of 0.5 relative em and it goes all the way bottom so there's margin for all arounds there's negative margin there's margin y so if you want to set margins of the top and bottom the y axis that's m y uh m x is left and right here marching left and right for mx2 then there's uh m [Music] mt m top and b so this is mb4 but because of my intellisense i can just see that it's mb4 so that's nice and easy um also what's cool is i can change the so that so if i want to i could delete this do control space to load up intellisense and actually go through and inspect all different sizes that are possible so i can hit md10 save it updates there um also i can experiment with text sizes to see what size i want this heading to be i could say text size 7xl and save that super big so very clean it's a very simple example uh let me show you something that's also neat about tailwind is the way that it does uh it's they're called modifiers is what i think it's called um so i have here this card component which controls essentially the layout for each of these individual items and if you when i hover over this i don't think you can tell there's a slight shadow that happens in the bottom here do you see that right there slight little shadow the way that's done in tailwind also before i go any further i'm only using tailwind for this entire project i had no need for custom class names at all and tailwind was able to provide any styling needs any css needs by itself which is phenomenal it can do that but in this case there's this hover shadow large x so shadow so shadow large is a standalone class name box shadow you can see here it's shadow large right it just applies the this box shadow but this hover prefix is a convention that's used across tailwind that essentially does you know colon hover on the element so that when this element is hovered then apply these styles and it provides some built-in modifiers by default you can extend talent to choose which modifiers to use but in this case i can actually go here and let's just delete the size i can go to 2xl let me save that and now when i hover that's much bigger if i go back to here shadow let's do and if i just delete it then if i hover over it you see there's no modifier there there's no there's no box shadow at all what's also cool is they have some nice utilities as well which i thought i would need to use uh my own css to do this but actually don't i this item list you can see there's space in between each of these that's actually controlled here by the space y5 if i do space space between this whole page to control the space between child elements which is a super common thing that people do and the fact that it's built into the tail one just kind of shows the maturity of the framework itself so here i can actually go here let's make this obscene let's do 28. yeah there you go a huge space between each item so that every item will have that space between them nice and simple and then uh last but not least it's honestly harder to author tailwind than it usually is to read it so in this example this is the item component that is controlling all of this but if you just like kind of glance at this you should be able to read most of it by and large like here's display flexbox flex row justify start oh here's that mr margin right to have on the right hand side here border uh what is this order right with that is not intuitive i would say but can't have every class name be so border purple 100 text there's the modifiers when you hover over here you can see that animation that transition you have here transition colors duration 150 to make it change so it's all these things that it's actually not that hard to read when you actually get into it now switching back to the card example um i made this into a react component to make it easily reusable uh it's literally just a div with children and i just put the common class names in here but let's say you don't want to do that let's say you actually want to make your own custom css class theme you can do that with tailwind if you wanted to it's not really encouraged but if you want to make your own custom css components for buttons and stuff like that you can extracting component classes with apply it's using i think this uses uh less to actually do the styling and it uses a custom directive to essentially say that um here's a new classroom that i created apply these tail and class names to it to make all those styles built into this class name so that's tailwind in a nutshell it's weird especially if you've never done utility atomic css before it's weird i'm not gonna deny that but for making for for making and designing your own applications to make them look like your own and not look like an off-the-shelf implementation it's pretty much the best option out there i think in some ways it's making me a better designer because i know all the styles that are there have been approved by somebody who has a better eye than me about design so as i use them i'm kind of building up my intuition on why things look the best way they do it's still possible to make something ugly with tailwind no doubt about that but it definitely helps provide a nice little you know area of safety where it's easier to succeed than it is to fail i've been enjoying it uh the learning curve is real but if you can push through it if you use the documentation page you use the intellisense plugin it makes it a lot easier to do so and also the more you practice the easier it becomes so i do recommend tailwind it's not a free tool to just get up and going there is a learning curve but it's pretty cool especially if you want to just not if you want me to make your sites and applications look pretty that's the video for this week hope you enjoyed if you are not already a subscriber become one for more videos like this there's a lot of them that i have now it's been a lot of videos so i'm excited to share that knowledge with all of you i will see you again next week stay happy stay coded

Channel: Harry Wolff

Views: 47,552

Keywords:

Id: 9U8eKmwUbIs

Length: 18min 14sec (1094 seconds)

Published: Mon Jan 25 2021