I read recently the article How I dropped 250KB of dead CSS weight with PurgeCSS and thought I should put out my setup for this situation. I use Laravel Mix for both Laravel development and also for my WordPress work. My main stack includes Vue.js and TailwindCSS, so these snippets will do just fine when working with these frameworks. Beyond that I can’t make any promises.

But as an endorsment to PurgeCSS, I will tell you, that for the past few projects I have done in WordPress, I managed to get my CSS file down to around 50 kB minified.

My Laravel config file looks like this

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

require("laravel-mix-tailwind");
require("laravel-mix-purgecss");


mix.browserSync({
    host: 'localhost',
    port: 3000,
    proxy: '192.168.10.22'
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/css/main.scss', 'public/css')
   .options({
      processCssUrls: false,
   })
   .tailwind();
   .purgeCss();

if (mix.inProduction()) {
    mix.version();
}

 

My WordPress config file looks like this

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");

require('laravel-mix-purgecss');

const purgecssWordpress = {
    whitelistPatterns: [
        /^rtl(-.*)?$/,
        /^home(-.*)?$/,
        /^blog(-.*)?$/,
        /^archive(-.*)?$/,
        /^date(-.*)?$/,
        /^error404(-.*)?$/,
        /^logged-in(-.*)?$/,
        /^admin-bar(-.*)?$/,
        /^no-customize-support(-.*)?$/,
        /^wp-custom-logo(-.*)?$/,
        /^search(-.*)?$/,
        /^nav(-.*)?$/,
        /^wp(-.*)?$/,
        /^screen(-.*)?$/,
        /^navigation(-.*)?$/,
        /^(.*)-template(-.*)?$/,
        /^(.*)?-?single(-.*)?$/,
        /^postid-(.*)?$/,
        /^post-(.*)?$/,
        /^attachmentid-(.*)?$/,
        /^attachment(-.*)?$/,
        /^page(-.*)?$/,
        /^(post-type-)?archive(-.*)?$/,
        /^author(-.*)?$/,
        /^gallery(-.*)?$/,
        /^category(-.*)?$/,
        /^tag(-.*)?$/,
        /^card(-.*)?$/,
        /^menu(-.*)?$/,
        /^tags(-.*)?$/,
        /^tax-(.*)?$/,
        /^term-(.*)?$/,
        /^date-(.*)?$/,
        /^(.*)?-?paged(-.*)?$/,
        /^says(-.*)?$/,
        /^depth(-.*)?$/,
        /^comment(-.*)?$/,
        /^comments(-.*)?$/,
        /^children(-.*)?$/,
        /^crnb(-.*)?$/,
        /^custom(-.*)?$/,
        /^custom-background(-.*)?$/,
        /^port-description(-.*)?$/
    ]
};

mix
    .browserSync({
        proxy: "custom.local",
        files: ["./**/*.css", "./**/*.js", "./**/*.php", "./*.php"]
    });

mix
    .js("assets/js/custom/custom.js", "assets/js")
    .postCss("assets/css/style.css", "./", [
        tailwindcss("./tailwind-config.js")
    ])
    .options({
        publicPath: "./"
    })
    .purgeCss({
        // enabled: true,
        globs: [
            path.join(__dirname, './../**/*.css'),
            path.join(__dirname, './../**/*.php'),
            path.join(__dirname, './../**/*.vue'),
            path.join(__dirname, './../src/**/*.js'),
        ],
        extensions: ['html', 'js', 'php', 'vue', 'css'],
        whitelistPatterns: purgecssWordpress.whitelistPatterns
    });