Using PurgeCSS to remove unused Tailwind classes with Laravel mix

I’ve been keeping an eye on Tailwind CSS, a utility class library written by Adam Wathan in collaboration with Jonathan Reinink, David Hemphill and Steve Schoger, for a long time and its stream of glowing reviews are hard to ignore.

I, like many others, when I first saw the utility first approach it didn’t sit right with me, HTML littered with classes looked confusing and seemed to go against everything I’d ever learnt in CSS development about keeping style and structure separate. With that being said, Tailwind continued to intrigue me and with the support of people like Taylor Otwell, who championed it after using it on Laravel Vapour, only peaked my interest more.

So when I started to work on a new open source Laravel project, I decided this was the moment I was going to take the plunge into Tailwind CSS. Using utility classes for a component based open source project made sense, components could be kept small to avoid cluttered files and it meant that anyone could contribute to the project without having to worry about sticking to project specific naming conventions.

One of the issues that had initially worried me about Tailwind CSS was loading lots of unused utility classes in my CSS, of course my worries were unfounded, enter PurgeCSS. PurgeCSS, for anyone has not come across it, scans all of your source files for CSS classes and removes all unused classes from your compiled CSS file.

The Tailwind CSS documentation is very thorough and of course there is documentation for both Laravel Mix and using PurgeCSS, however there was no documentation (to my knowledge) about using the two together. So here is a simple guide to use the two technologies together, which you may find helpful.

First install Tailwind in your Laravel project using the following command:

npm install tailwindcss

And add the Tailwind helpers to your app.scss file:

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */
@tailwind  utilities;

Create your Tailwind CSS config file by running:

npx tailwind init

Next you’ll need to install PurgeCSS for Laravel mix:

npm install laravel-mix-purgecss --save-dev

Then you’ll need to edit your webpack.mix.js file, like this:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

//Javascript
mix.js('resources/js/app.js', 'public/js');
//CSS
mix.sass('resources/sass/app.scss', 'public/css')
.options({
    processCssUrls: false,
    postCss: [ tailwindcss('./tailwind.config.js') ]
})
.purgeCss({
    enabled: mix.inProduction(),
    folders: ['src', 'templates'],
    extensions: ['html', 'js', 'php', 'vue'],
});

We’re now set up to use PurgeCSS with Tailwind in Laravel using Laravel Mix. To test your set up try running:

npm run production

Note: PurgeCSS will not run during development mode.

I’d also like to mention a couple of helpful Tailwind CSS VS Code plugins which you may find handy:

Headwind — An opinionated class sorter for Tailwind CSS by Ryan Heybourn

Tailwind CSS IntelliSense — Tailwind CSS class name completion by Brad Cornes

Tailwind Sass Syntax — Tailwind syntax highlighting for Sass by Maciej Ładoś