Using PurifyCSS to remove unused Tailwind CSS classes

Published in

andrewdelprete

3 min readNov 18, 2017

Update 2! — Nov 19, 2017

Good news! After some digging around, I found another library called PurgeCSS that is more flexible and frequently maintained than PurifyCSS. It allows for custom “Extractors” which lets us write some regex to work with Tailwind CSS classes. A shout to the author who made some quick fixes to make this work with Tailwind CSS style syntax.

Laravel Mix Example: https://gist.github.com/andrewdelprete/277a5a2af33aea2481c54a6a8b35d6c3

Webpack Example:
https://gist.github.com/andrewdelprete/d2f44d0c7f120aae1b8bd87cbf0e3bc8

Update! — Nov 18, 2017

PurifyCSS has an issue where classes containing numbers appended to the end and special characters like : are not cleaned up / purified.

In my original post, I only used the handful of classes found in the Tailwind webpack-starter index.html file. There was a huge reduction in CSS size but once you utilize more classes in your HTML that figure quickly diminishes.

Issue: https://github.com/purifycss/purifycss/issues/147

There is a PurifyCSS fork called purifycss-extended which fixes this issue but can only be used via the CLI at the moment. Hopefully the purifycss maintainer fixes the issue for us!

Fork: https://github.com/HapLifeMan/purifycss-extended

If you’ve jumped on the Atomic CSS bandwagon you’re probably enjoying the flexibility of those tiny magical helper classes. There are many great libraries out there: Tachyons, BassCSS, BeardCSS, to name a few, and the newest kid on the block, TailwindCSS, which we’ll be using during this post.

Something often overlooked is the sheer amount of utility classes which these libraries output. There is literally a class for almost everything imaginable; various font sizes, colors, spacing, etc… and most of these utilities come with media query variations.

Tailwind, like many utility class approaches, is nearly 15,000 lines of CSS and is about 217kb in size (unzipped + un-minified).

The majority of the CSS you send to the user will never be seen even though they still have to download and parse it.

Unused CSS may not be a big deal for your target market, but if you get a lot of mobile traffic I highly suggest the following approach to help clean up some of those unused classes.

Enter PurifyCSS* (See updates above)

A function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the used CSS. -purifycss

https://github.com/purifycss/purifycss

PurifyCSS is a great tool for cleaning up your CSS. It can be used with most common build tools such as Gulp, Grunt, Webpack, Laravel Mix, or via the CLI.

For this post, I’m using the Tailwind webpack-starter and adding the purifycss-webpack plugin to my `webpack.config.js` file that comes with the starter.

// webpack.config.jsplugins: [
  new ExtractTextPlugin("styles.css"),
  new PurifyCSSPlugin({
     paths: glob.sync([path.join(__dirname, "/dist/*.html")])
  })
]

When using Webpack, PurifyCSS will take the full utility class output of styles.css and compare it with the set of files you specify. You can use the glob-all NPM module to pass an array of file glob types. If you’re using templating language Laravel Blade, you could pass a glob of your *.blade.php files.

As the PurifyCSS documentation indicates, you can pass many file types to the plugin and it magically filters out what you’re not using. It even works with dynamically created classes in your Javascript files.

Here’s what it might look like with Laravel Mix:

// webpack.mix.js
mix.options({ purifyCss: true });

Size Comparison

After running PurifyCSS on the Tailwind starter:

Before — 15,000 lines and 217kb (unzipped + un-minified)
After — 3,500 lines at 51kb (unzipped + un-minified)

That’s about 4x smaller!

Summary

As web developers, our job is not only to provide a beautiful application to our users but to make sure we’re delivering a “silky smooth” experience.

Limiting the amount of CSS we’re sending down the wire is one way to speed up initial render time (less to download + parse). Tools like Tailwind provide a ton of amazing helper classes to help us develop rapidly. PurifyCSS is there to clean up the excess unused classes.

Shameless Plug

I’ve recently recorded a few video series covering JavaScript Promises and Async / Await. Please feel free to check them out at www.fivemindev.com!

Also, If you’re interested in learning more about some easy performance wins, I’ve written a few articles on www.learnperf.com.