Set up Tailwind and PostCSS

The Tailwind Utility-First Workflow

Make Styles Responsive in Tailwind

Conditionally Style Elements with Tailwind Variants on Hover and Focus 

Compose Tailwind Utilities with @apply

Extract Reusable Tailwind Components

Customize the Tailwind Design System

Remove unused CSS with Purgecss

Introduction to Tailwind and the Utility First Workflow

Out of the box, tailwind generates a lot of css. For example, every background color, text color, and border color needs an object generated for it with each gradient available. In addition, more classes need to be generated for each breakpoint defined within tailwind as well as any variant that is available. Thousands and thousands of utility classes are generated.

Learn how Purgecss can remove all unused classes in your project.

Adam Wathan: [0:00] Out of the box, Tailwind generates a lot of CSS. It makes sense when you think about it.

[0:05] Taking a look at the default Tailwind 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 this classes at all four breakpoints.

[0:19] Then we need to multiply all of those breakpoints by hover variants, focus variants, as well as any additional variants that you've enabled.

[0:26] Now extend that thinking to all of the utilities that Tailwind needs to generate. You quickly realized that Tailwind actually needs to generate thousands and thousands of utility classes.

[0:35] I've gone ahead and compiled our CSS for production here, just so we can see what it looks like. Even minified this file is still 400 kilobytes, which is a ton of CSS.

[0:45] It is worth noting that gzipped, 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 PurgeCSS.

[1:04] PurgeCSS 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 CSS file. This tool works perfectly with Tailwind because Tailwind is designed to give you all of these classes just in case you might need them.

[1:20] At the end of the day, you always end up only using a very small subset of what Tailwind has to offer. Maybe you're using mt-4 somewhere, but you never use ml-4 or mr-4. Maybe you never use mt-4 at a specific breakpoint.

[1:34] 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 percent of the classes that Tailwind generates for you.

[1:43] Let me show you how to install PurgeCSS and get it set up. The first thing that we're going to do is install it into our project. PurgeCSS is available as a PostCSS plugin just like Tailwind and Autoprefixer. That's the version that we're going to install. We're going to run npm install @fullhuman/postcss-purgecss. Now that it's installed, we just need to set it up in our PostCSS config file.

[2:07] Let's head over to postcss/config.js and add this new plugin. What I'm going to do is at the very end of our plugin list here, I'm going to require @fullhuman/postcss-purgecss. Then we're going to invoke it as a function parsing through some configuration.

[2:24] The first thing we need to specify is where our templates are. We just need to add this content key, and then in here, we just provide the paths to all of our templates. In our case, we might have ./source/**/*.view to grab all of our view files. Then we also need to make sure we don't forget the index.html file in the public directory.

[2:45] This is a bit specific to Vue 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.

[2:54] Let's also add ./public/index.html. Next, we need to tell Purgecss how to find the classes in these files. Something that's important to understand is that Purgecss 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.

[3:20] It simply uses a regular expression to look for tokens inside this file. This might sound sort of underwhelming at first, but it's something that you'll grow to appreciate the more you use PurgeCSS because it makes the mental model of understanding how it works very, very simple.

[3:35] 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 it was removing a class that you needed it to keep. Let's head back to our config file and configure the regular expression it should use to find classes in our files.

[3:51] 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 of the class names that it finds in the file. Here we just have to write a regular expression that's going to match any of Tailwind's class names. All we have to do is write something like content.match, and then provide our regular expression.

[4:10] 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 or more of these, we can consider this a class name.

[4:29] If 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. If we've done everything correctly here, we should be good to go. Let's just run MPM run builds to compile our CSS.

[4:44] 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.39 kilobytes, and gzipped, it's not even 2 kilobytes. 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.view, and let's just pick a class and make sure that it's actually still there in the final file.

[5:06] What about text 2XL here? If we head back to the CSS and do a search for text 2XL, yup, you can see that class is there. How about another one? Maybe something a little bit more complicated. Here we have SM MT6. Is that still here? If we look at SM and then escape the colon, MT6, yeah, SM MT6 is here.

[5:25] But you notice we don't have SM MT10 or 12 or any of that stuff. Anything that we didn't actually use that Tailwind did generate for us has been stripped out.

[5:33] One final thing to note is that the way we have this configured right now, we're going to be running PurgeCSS any time we change any of our files, including in development. It's a little bit slow compared to some other build processes.

[5:45] In my experience, it's best left to just production mode. That means that you have all of Tailwind's classes available to you during development, and then when you build for production, it'll strip out anything that you're not using.

[5:55] The easiest way to do this in your PostCSS config file is just to conditionally include this plugin based on the current environment. We can do that just by checking process.mv.nodemv 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.

[6:16] That's it. I hope you enjoyed this introduction to Tailwind and feel like you have a pretty good idea of how it works, and maybe feel ready to start playing with it and some of your own projects.

[6:24] 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.

Course

Introduction to Tailwind and the Utility First Workflow

Remove unused CSS with Purgecss

Share this video with your friends