7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. CSS

Remove Unnecessary CSS With PurifyCSS and Grunt

Read Time: 3 mins

In this tutorial I’ll show you how to use Grunt and PurifyCSS to create a super-lightweight stylesheet with minimal effort. We’ll install it, then learn how to run it with and without Grunt, to give us much more performant styles.

Watch the Screencast

PurifyCSS is a JavaScript tool which parses your markup files (HTML, PHP, or even JavaScript) then cross-references them with whatever CSS you’re using. Any selectors in your CSS which aren’t being used will be removed, leaving you with only the styles that you actually need.


To install PurifyCSS you can either grab the repo directly from GitHub, or install it via npm (more details on how that’s done via this tutorial from Kezz).

install via npminstall via npminstall via npm
Installing via npm

Our Demo

The files we’ll be using to demonstrate PurifyCSS are a full Bootstrap stylesheet and an index.html. You can grab them from the source repo. The index.html file is pretty straightforward; there’s only a hero section, with some buttons, form elements, and the Bootstrap grid; we certainly don’t need the whole library of Bootstrap styles.

bootstrap stylesbootstrap stylesbootstrap styles
The full Bootstrap stylesheet

Run PurifyCSS

To run PurifyCSS on this stylesheet, go to the command line prompt, navigate to the project folder and run a command with the following:

  • the purifycss command to kick things off
  • the source stylesheet which is to be purified
  • the target markup files, in our case the index.html
  • an optional parameter --min if we want the resultant CSS to be minified
  • an optional parameter --out after which we can specify where we want the resultant file to be saved
  • the optional parameter --info if we’d like the process to be logged to the terminal
  • and the optional parameter --rejected which, when included, logs all the selectors which have been rejected from the source stylesheet

Our final command looks like this:


The source stylesheet has been trimmed by well over 100Kb, good job!

Using PurifyCSS With Grunt

To automate our process even further we can use a task runner like Grunt. Going back to our starting point, we need to add a package.json to our project. Running npm init from within our folder will take us through a package.json creation process, essentially outputting a file with the following details:

Then, if we don’t already have it, we need to install Grunt:

With that done you’ll see a “node_modules” folder has been added to your project.

Install Grunt Plugin

Next we need to install the Grunt plugin for PurifyCSS.

Create Gruntfile

Now we need to create a file called gruntfile.js. Take a look at the source files to see what’s contained within this file, but of particular interest is the Grunt task itself:

The options within the target object should be familiar to you from our previous exercise, and with these parameters set, our file is ready.

To run Grunt, in the terminal enter:


And we’re done! We looked at two different approaches for using PurifyCSS to clean our stylesheets up. Don’t forget: there’s no point in having browsers load in kilobytes of styles which aren’t even used, performance matters!

Useful Resources

More Grunt on Tuts+

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.