Coding Shorts: TailwindCSS - You Might Be Missing the Point

hi this is sean wildermuth welcome back to coding shorts if you haven't done so yet please subscribe it really does help me on to our topic today we're going to be talking about tailwind css it's a library and utility that helps you create your designs for web applications or pwas or whatever you're doing with css well this coding short can't really cover all the details of how tailwind works there are courses and a bunch of other resources for that i want to take this chance to really talk to you about why tailwind css is important and different from other libraries like bootstrap hopefully i'm gonna change your mind about how it works and to show you how at first glance it may seem like a terribly bad idea but after you start working with it you're gonna be able to work much much more quickly let's get started [Music] so let's get into it i think tailwind css is a different sort of project than something like bootstrap or other projects like it in that it's a utility-based class and i think there's some confusion out there in the community what that really means and let's sort of dig into it we're going to start with just an index.html file i have here it's pretty simple and it's just a mockup without any styling of my sort of blog page so if we go to wildermuse.com you can see this is just the blog i have there's a left section there's sort of a body section of course always subscribe to the updates and we want to make this sort of work in the kinds of things we're doing and so let's come over here and let's go ahead and add tailwind and so the first thing we're going to want to do is actually just create a new css file so i'm going to create a new file in css and i'll call it our site.css [Applause] and in here we're going to want a couple of weird things that you're not going to be used to these are about tailwind and the first one is going to be tailwind base tailwind components and tailwind utilities and of course the editor is going to be confused about these because these rules aren't keywords that css knows about it all because what we're really going to do here is we're going to use tailwind and for now we're not even going to install it locally i have node on my machine and that's going to be required but we're going to use npx to call tailwind css and we're going to just give it an input of css site.css and we're going to give it an output of css final.css and this is going to take this file and it's going to output a css file that we'll actually use on our page that has all those utilities with it needs to install this package and so we're going to say yes and it's going to install it for now just in the global package manager that's how npx sort of works gives us this sort of temporary file you see it took quite a while to do it and let's open up this final and we will see initially it's enormous this is one of the big complaints that a lot of people have is the css utilities are gigantic 188 000 lines of code that is a lot of good we'll come back to why that's not what you're really going to be dealing with but let's start by just adding it here to our page and we're just going to say css final because that's what we're actually going to load in on the page we go back and refresh we'll see that all those sort of headers and footers have been completely reset and that's part of the philosophy here though you can turn that off i don't have time and a coding short to show you but i've been articles that i'll link in the notes so you can see much more details of how to do things like turning off resetting of all the css and such and the way that this works now that we have it is there's going to be classes it's all really class-based to say we want to do certain things and so here in the html i'm going to have three sections a main header and a side and these represent places that i really want to be on the left and the center and the right or from your perspective the left the center and the right and so i'm going to start by just adding a class here called bg let's say blue 800 and this is going to be a class that tells it i want it to be blue and i want to be the intensity of 800 which is fairly large because it goes 50 and then by hundreds it goes 100 200 up to 900 and i'll copy the same thing and i'll make this one yellow and i'll make this one gray let's see if that's the correct spelling of gray i always get the the wrong one first so we can now see we're getting that dark blue that's sort of orange which is a dark yellow believe it or not and then we have this gray background though it looks like i misspelled it now it's that dark gray right and so at the beginning we can see this our first sort of classes that are allowing us to do this we could do this pretty simply with some other things but let's make this a little prettier let's make this one yellow and about 500. and this one we're going to actually make white and this one will go ahead and make gray maybe 300. and if you have the right plugins installed you'll get intellisense for this as well but we're not quite there there we have kind of a yellow and kind of a gray on this side and then white in this whole section so background colors simple ideas here you also have the idea of let's say making this a flex container and let's say flex actually we don't need to say flex columns because that's by default now we can see we're starting to get that look it's automatically sort of made this to be as wide as we want we're starting to get sort of the basics of what we want our page to be and so similar to bootstrap but also interestingly is we can also add padding and margin here so let's add a padding of about 2 and we'll see that 2 when we look at it actually represents half of an em so every number in any of these definitions here is going to point at an rem value and those values are going to be a quarter of per number so we'll get one two three etc so we have a pretty good flexibility there we'll put padding in there of two as well and we'll put it in the bottom one in fact let's make that one padding four leave a little bit more space and when we refresh we can start to see the padding is giving us some of that room and so you can see the two is not much there let's focus on styling the center section and most importantly you'll notice that the blog is small and that the other elements here are all pretty plain so let's start by just styling that h1 and we can do that with text lg for large and we can see that's a little larger but not really as large as we want let's do 4xl which tells it to be much bigger let's also say font bold right we can start to see that we're getting some of the behavior we really want here let's go ahead and also say font serif which tells it we want a different one of default fonts and right now we're not including any fonts it's just using some defaults and so there these stay all sans serif and there we have a serif font and it's starting to look good but we'll notice that down here we're using an h2 and so let's sort of copy the same thing down here so let's make this let's say 2xl right and so some of the complaints about the way that tailwind work is this how is this any better than just doing style right and putting those same elements in and if you leave it this way it's not it just simply isn't what tailwind does for me is allows me to prototype really quickly with these same ideas so if we simply take this and apply it and copy and paste it everywhere of course it's going to be awful but instead let's go over to that site css and i can do something called layer and this helps me know which layer to put it in so is it going to be after base after components or after utilities if i just put this in without layer it'll just show up at the end of the file or if i put it here it'll end up inside here layer is really important when you want to segment this into multiple files but we're not quite there yet so let's start with a simple without a layer and say h1 we want to apply the same design idea that we have here so let's copy all of this and let's use the magic at apply and app apply is the magic of tailwind as far as i'm concerned this is where everything works at apply allows me to prototype it and then quickly put it in these right and if i do that and just take this out right because i'm creating a rule for each one and i'm taking that design idea i had for each one and i'm applying it here in fact let's make one for two as well remember we said two is xl and we can continue to use these by sharing them like we would when we write normal css right h1 h2 at apply so we're using the same semantics those same instincts we have about css but not having to worry about the pixel perfectness of it tailwind is giving us sort of a design platform a foundation that we can build on without having to worry about that and so if we go back to the terminal let's rerun this again while it's running let's get rid of this class as well if we come back here and refresh we'll see that all of the h1s and h2s are now applied with that same philosophy that we created right big big smaller small and so while i often will have tailwind ideas here that are i'll have tailwind classes here that may be one-off like putting the background color i'm never going to really apply this because this is a one-off on my page or my application i will in other places just use classes ids or element names to decide what they really should look like and that to me is is a big win but we have a couple of other things going let's talk about sort of the quick prototyping i'm talking about so here i have a div with three stories and right now they're just enormous right and so how would i go about changing this so let's go ahead and say class grid here and i'll add grid calls for so i want four columns in fact i'll say three columns we can come back and see what our site looks like it's already created those three columns for us and then we can create a class here to see how we want to do this so let's first say border heading let's say two all around and let's give ourselves a little margin between them and so let's say we could say left or right but we can all see x for the left and right side and let's make that four and let's add a class here for image and say rounded as well in fact yep border we don't want that rounded rounded and shadow and we start to see that take shape for each of these but notice it's not happening for all of them and let's just come down here and say class margin left 2 just to move them in a little text large because i want them to be a little larger let's actually move this in so it's a little even further in notice that the text and stuff are smaller but that's larger and let's go m y here of one just to give us a little space top and bottom or i could just say b for bottom here just to give ourselves a little space there and that's a decent look for what i want and so now that i have those i'm gonna translate this over to the site just like we did before right i'm gonna create a class called a story block and i'm going to add apply this border because i'm going to replace this with story block as a name i'm going to apply those and then what am i going to do i'm going to say story block image and this will be add apply what we did before rounded shadow dot story block ul for that little list there and of course i give these all class names and subclass names however you wanted to do it but here i'm going to say apply and what did i do here i just said ml and then all i need to do is i can get rid of all these classes so my text remains relatively clear and then i just need to put that story block in all these divs this allowed me to figure out the what i want for the look and then quickly apply it to all those objects so if i run the build again one of the interesting things you'll see here as you can see it i'll apply that same look and feel across them just like you'd expect it to right you could even do mouse overs and such so let's actually make one more change here which i didn't talk about where this notion of states tailwind is very interesting and so i'm just going to say hover background gray 200. notice it has this thing that is so it's a modifier for what we want to actually do with this notion of called states so if we run it again and we can do this with a watch and i'll talk a bit about in a moment of why you would want to do this and you might want to install this not globally but you might want to include it in the project as well that would be much more common but for time i'm not going to really do it but now when we hover that hover tag is just giving us that behavior that we talked about that we want something to happen when we hover and it supports a handful not every single property but a handful of different classes that it can apply or unapply for you it's got that built in via css because remember all this is happening in css there's no javascript in it at all and so let's talk about one last thing and that is this idea of responsiveness now a lot of other frameworks have responsiveness of course built in and they have different classes so you can sort of define it but they use these same modifiers that we used with hover except they're the break points and so if i say when it's small because again it's mobile first i want it to be one but let's say at medium colon right four break points five break points in our case extra small which is without any modifier small medium large extra large and so medium grid calls two large and i won't do it for every one but calls three right with that in mind just open this up a little so we can go ahead and make it smaller you notice it's one when it's extra small two when it's small but smaller than medium and then it becomes three and three continues for all the other sizes that we didn't define and so these modifiers become an easy way for us to think about applying the same class but responsibly so two more things to talk about one is that's all great sean but i'm not going to ship this enormous file in fact if we less css we look at the size we can see that it's nearly four megs in size right way too big way too big for especially for this really simple site and one of the ways you can get away from that is if you add some configuration and so let's go ahead and do the work of actually getting it added so i'm going to do npm init y so that we can get a packages.json file and this should have nothing in it right this has the sort of default and i'm going to go npm install tailwind css and now i can call tailwind without having to call the npx because it's installed locally right see this init and that's going to generate me a tailwind configuration file this is where we can do some modifications the way it works but the only one we really want right now in the current version is purge though this name is about to change what we really want to say is give it a list of things to look for because what tailwind is going to do is scan your project in this case i'm just using plain html so we get away with that blob and it will then when it builds it it will purge them and so two things are going to happen here i can now say let's go into the package.json i'm going to create a script for css build and i'm going to call tailwind css just like i did before input of css site output of css final and here i'm going to say dash w for watch and then i'm going to add dash dash jit this is an experimental feature in the latest version of tailwind but should become a final feature i've noticed that's a tiny bit buggy and i have to restart it occasionally but for the most part it does the right thing and what are these going to do with that configuration file when i go npm run build took 188 milliseconds to build right much better than the eight or nine seconds it initially took what's more important is our final css is just 700 lines now it's way smaller because what has it done it's included only the files that we actually need and a majority of this in fact all the way down to to here which is line 500 of 700 is actually all those css resets which we could turn off as well and make it even smaller if we didn't want to have to build up our whole project from scratch and so what tailwind is giving us in my opinion is a way for us to quickly prototype by using classes instead of having to use pure css makes it easier to add classes even in the web tools that will allow us to prototype even further and then the trick is using apply as well as using purge through the jitter or even the old method which also did a release builds with the same structure of parsing it out and remember that this parsing out or this purging this can be any files that have html that it can look through and that's an important idea and you can program it to automatically include certain classes let's say you're building something where there's user content so really can't create the file because of that you can go ahead and opt them into always putting these individual classes or even these sections of classes these um module classes in your file every time in case you need something more elaborate but this is why it's hugely different it does mean there's a build step and that is a problem for some people but overall i think i think this is the right way to go if you've gotten this far thanks for watching the whole thing of course like and subscribe you can also see my pluralsight videos at sean link that's shawn s-h-a-w-n-l dot i-n-k slash ps author thanks for joining me and see you next time on coding shorts [Music] [Music] you

Channel: Shawn Wildermuth

Views: 1,768

Keywords: TailwindCSS, CSS, Web Development, UX, UI Design

Id: Xxtn72vpQeg

Length: 20min 27sec (1227 seconds)

Published: Mon Oct 25 2021