Using PurifyCSS to remove unused Tailwind CSS classes

Andrew Del Prete
Nov 18, 2017 · 3 min read
Image for post
Image for post

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:

Webpack Example:

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.


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!


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

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!


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!

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



Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store