Skip to content
Zero-config Purgecss for Laravel Mix
Branch: master
Clone or download
Latest commit 95083b9 Mar 4, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update test snapshot to reflect PostCSS output Jan 5, 2019
.editorconfig First commit Jan 10, 2018
.gitignore Update gitignore Mar 23, 2018
.prettierrc Cleanup; Add integration test; Enable Travis Mar 23, 2018
.travis.yml Cleanup; Add integration test; Enable Travis Mar 23, 2018 Adds missing file Oct 27, 2018 First commit Jan 10, 2018 Merge pull request #60 from Omranic/patch-1 Mar 4, 2019
package.json Release 4.1.0 Jan 18, 2019

Purgecss wrapper for Laravel Mix

Software License Latest Version on NPM npm

Purgecss doesn't require too much work to set up, but there's some boilerplate involved. This package adds a purgeCss method to Laravel Mix, which installs Purgecss for you with a set of sensible defaults. Zero configuration for your average Laravel project!

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

// ...

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')

The Purgecss config is inspired by Jonathan Reinink's config for Tailwind CSS.


Before you get started, make sure you're using laravel-mix version 2.1 or higher.

For version 2.0.* of laravel-mix please use version 1.* of this wrapper. This wrapper is not compatible with laravel-mix version 1.*.

You can install the package with yarn or npm:

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

Then install the extension by requiring the module in your Mix configuration.

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

// ...

Purgecss can then be enabled by calling .purgeCss() in your Mix chain.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')

Custom options can be passed when calling Purgecss if necessary.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss({ /* My options */ });


The default configuration should be good enough for an average Laravel project. In short, all html, js, php & vue files in the app and resources folders will be scanned for selectors. Purgecss is only enabled in production.

For all configuration options, refer to the purgecss and purgecss-webpack-plugin docs. This Mix extension adds four more configuration options for your convenience.

Option Type Default Description
enabled Boolean true in production Determines whether css should be purged or not
globs Array Matches all php files in app/ and all files with extensions in the extensions option in resources/ Determines which files should be scanned for selectors
folders Array resources Determines which folders should be scanned for selectors
extensions Array html, js, jsx, ts, tsx, php, vue Determines which file types should be scanned for selectors. If you override extensions, the defaults will be lost.
extractorPattern String /[a-zA-Z0-9-:_/]+/g Regex pattern used to match classes found in the given files.

Example custom configuration

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


    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

        enabled: true,

        // Your custom globs are merged with the default globs. If you need to
        // fully replace the globs, use the underlying `paths` option instead.
        globs: [
            path.join(__dirname, 'node_modules/simplemde/**/*.js'),

        extensions: ['html', 'js', 'php', 'vue'],

        // Other options are passed through to Purgecss
        whitelistPatterns: [/language/, /hljs/],

        whitelistPatternsChildren: [/^markdown$/],

Overriding globs

Your custom globs are merged with the default globs. If you need to fully replace the globs, use the underlying paths option instead.

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


    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

        // Will *only* look for views and simplemde classes
        paths: () => glob.sync([
            path.join(__dirname, 'resources/**/*.blade.php'),
            path.join(__dirname, 'node_modules/simplemde/**/*.js'),

Usage outside of Laravel

Using Laravel Mix outside of a Laravel project? We've got you covered! Everything still works, but you might want to update the folders that are being scanned for selectors.

Laravel stores views and other assets in the resources folder, so that's where we assume you're keeping things. If you're in a different environment, like Jigsaw, you'll need to update the folders option.

    folders: ['source'],


Please see CHANGELOG for more information what has changed recently.


Please see CONTRIBUTING for details.


If you discover any security related issues, please email instead of using the issue tracker.


You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

We publish all received postcards on our company website.


Support us

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.


The MIT License (MIT). Please see License File for more information.

You can’t perform that action at this time.