Designing with Tailwind CSS: Optimizing for Production with Purgecss

out-of-the-box tellen generates a lot of CSS and it kind of makes sense when you think about it taking a look at the default tail and config file here using colors as an example we have to generate a class for background color text color and border color for every single one of these colors then we need to generate new copies of those classes at all four breakpoints and then we need to multiply all of those break points by hover variants focus variance as well as any additional variants that you've enabled now extend that thinking to all of the utilities that l1 needs to generate and you'll quickly realize that till when action needs to generate thousands and thousands of utility classes I've gone ahead and compiled our CSS for production here just so we can see what it looks like and even minified this file is still 400 kilobytes which is a ton of CSS now it is worth noting that gzip so when you actually send this over the network it's not actually that bad 66 kilobytes is big but it's actually not that crazy compared to a lot of the sites that you're visiting already we can do a ton better than this though using an amazing tool called purged CSS so purged CSS is a tool for looking through all of your templates figuring out what classes you're using and then stripping out any CSS you didn't actually use from your final CSS file this tool works perfectly with tail one because Tarun is designed to sort of give you all of these classes just in case you might need them but at the end of the day you always end up only using a very small subset of what someone has to offer because maybe you're using mt4 somewhere but you never actually use ml for mr4 maybe you never use MT for at a specific breakpoint so while those classes make a ton of sense to be available just in case you need them at the end of the day you're usually able to strip out over 90% of the classes that tellen generates for you so let me show you how to install purged CSS and get it set up so the first thing that we're going to do is install it into our project so purge CSS is available as a post CSS plugin just like toen and autoprefixer so that's the version that we're going to install we're gonna run npm install at full human post CSS purge CSS and now that it's installed we just need to set it up in our post CSS config file so let's head over to post CSS config KS and add this new plugin so what I'm going to do is at the very our plugin list here I'm gonna require at full human faux CSS purge CSS and then we're going to invoke it as a function passing through some configuration so the first thing we need to specify is where our templates are so we just need to add this content key and then in here we just provide the path to all of our templates so in our case we might have dot slash source slash star star slash star dot view to grab all of our view files and then we also need to make sure we don't forget the index dot HTML file in the public directory now this is a bit specific to view CLI projects it might be different for the project you're working on but just make sure you don't forget any of the files that contain any HTML in your project so let's also add dot slash public slash index dot HTML next we need to tell purge CSS how to find the classes in these files so something that's important to understand is that purge CSS is intentionally very very dumb about how it works it's not actually parsing your HTML and looking for class attributes or executing your JavaScript and trying to figure out what things are being added dynamically and stuff like that it simply uses a regular expression to look for tokens inside this file now this might sound sort of underwhelming at first but it's something that you'll grow to appreciate the more you use purge CSS because it makes the mental model of understanding how it works very very simple whereas if it was actually executing your code and doing all sorts of crazy stuff it'd be really hard to understand why it wasn't working if you ever ran into a situation where I was removing a class that you needed it to keep so let's head back to our config file and configure the regular expression it should use to find classes in our files so we do this using the default extractor key and here we just provide a function that receives the content from a file and returns all the class names that it finds in the file so here we just have to write a regular expression that's going to match any of talyn's class names so all we have to do is write something like content dump match and then provide our regular expression so here's the one that I recommend for tailwind projects we want to match all uppercase characters all lowercase characters all numbers dashes underscores colons for variants and stuff and slashes for classes that might contain fractions as long as we find one are these we can consider this a class name now for some reason there's no content in a file we have to make sure we return some default so if we don't find any matches we just want to return an empty array now if we've done everything correctly here we should be good to go so let's just we're on npm run builds to compile our CSS and now if we check out the new CSS file that was generated and look at the file stats you'll see the size is only 5.3 nine kilobytes and gzipped it's not even two kilobytes now let's take a look at this CSS I'll turn on word wrap here so we can actually see it let's head over to one of our files like maybe app dot view and let's just pick a class and make sure that it's actually still there in the final file so what about a text to excel here so if we head back to the CSS and do a search for text to excel yet you can see that class is there how about another one maybe something a little bit more complicated like here we have s/m mt6 is that still here so if we look at SM and then escape the colon mt6 yeah SM mt6 this year but you notice we don't have like SM MT 10 or 12 or any of that stuff anything that we didn't actually use that l1 did generate for us has been stripped out so one final thing to note is that the way we have this configured right now we're gonna be running purge CSS anytime we change any of our files including in development and it's a little bit slow compared to some other build processes so in my experience it's best left to just production mode that means that you have all of tailwinds classes available to you during development and then when you build for production it'll strip out anything that you're not using the easiest way to do this in your pro CSS config file is just to conditionally include this plug-in based on the current environment and we can do that just by checking process I am done node end and checking does this equal production and then using the and operator to only run this code if the statement before it is true as well so that's it I hope you enjoyed this introduction to Talon and feel like you have a pretty good idea of how it works and maybe feel ready to start playing with it into some of your own projects and in the rest of the lessons in this course we're going to be working through a bunch of different common component examples showing you how to build stuff like responsive nav bars or cards or sidebar layouts all sorts of common stuff you'll actually need to build in your application

Channel: Adam Wathan

Views: 15,887

Keywords:

Id: bhoDwo24K5Q

Length: 6min 38sec (398 seconds)

Published: Sat Aug 10 2019