Purge unused Tailwind CSS

After start using Tailwind CSS in my Laravel projects I notices that the app.css file is almost 2MB in size. I also have seen filesizes of 2.6MB. It takes time to load these css files into your browser. Using PurgeCSS will purge all unused utilities.

Serious file size

This can also be the case for your included javascript files. The reason for this is that all your packages and style robots are dumping every class while mixing to final app.css. So this final compiled stylesheet contains all classes even if you don’t use them.

With purgecss we are able to detect all used classes in your Laravel project and remove all the unused ones. This is how you can achieve this.

Install Laravel Mix PurgeCSS

(I assume that you are using Laravel Mix and have NPM installed in your Laravel project folder. Otherwise check this post for more information)

Laravel Mix PurgeCSS is a package from Spatie.be guys. Check out the GitHub source for more information about this package!

Add the package Laravel-Mix-Purgecss with npm:

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

Configure Laravel Mix PurgeCSS

Open your webpack.mix.js file and add the ‘require(‘laravel-mix-purgecss’);’ and ‘purgeCss()’ instructions to the file. File should look like this:

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss();

Start compiling and purging

Default purging will only take place when you compile for production. If you want to purge in Dev also you need to add a property to the PurgeCss command like so:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss({
    	enabled: true,
    });

To give it a try run ‘npm run dev’ or ‘npm run watch’ to run Mix and check your app.css file after compiling is completed.

Minified CSS size

Include css element names for external packages

In Laravel the Purge process will automatically read all files in the resource folder looking for any Tailwind classes you use. By default the following files will be checked:

        "app/**/*.php",
        "resources/**/*.html",
        "resources/**/*.js",
        "resources/**/*.jsx",
        "resources/**/*.ts",
        "resources/**/*.tsx",
        "resources/**/*.php",
        "resources/**/*.vue",
        "resources/**/*.twig",

But what if you have a custom CSS file with applied Tailwind classes? In Laravel you can include these files in ‘app.scss’ like:

@import '../css/custom.css';

For instance I am using the jQuery select2 package to extend my select boxes with a search inputbox. This Select2 packages comes with native CSS files but does not have a TailwindCSS style. I created this style myself and included this in my app.scss like so:

@import '../css/select2.css';

In this select2.css file I use the @apply directive to apply Tailwind CSS classes. Example:

.select2-container .select2-selection--single {
	@apply box-border cursor-pointer block select-none shadow;
}

But these rows are not investigated by the Purge CSS process because this select2.css file is using custom created element names like ‘select2-container’ and ‘select2-selection–single’. These are skipped and they will not appear in your app.css file. To enable these lines you need to whitelist a pattern. In this case the select-2 pattern. This is how:

Open webpack.mix.js

Go to the ‘.purgeCss()’ line and add a ‘whitelistPatterns’ property, like so:

.purgeCss({
    	enabled: true,
    	whitelistPatterns: [/select2-/],
    });

Save the file and run:

npm run dev

Now all element names begin with ‘select2’ will be added to your app.css file.

Leave a comment

Your email address will not be published. Required fields are marked *