December 10, 2018 Root User

[2020 Mar 28 Update]:

You can use spatie package to purge unused css .

npm install laravel-mix-purgecss --save-dev
Use the package as follow.

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

// ...

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

One of my current setup of tailwind purge css for a project is as shown below.


 mix.postCss('resources/assets/sass/tailwind.css', 'public/dist/core/css', [
        require('tailwindcss')('./tailwind.config.js'),
    ]).purgeCss({
        globs: [
            path.join(__dirname, 'public/assets/front/js/**/*.js'),
        ],
        whitelistPatterns: [/modal/],
    }).version();

Initially project has been started as using bootstrap so we were continue to use it, later we decide to add tailwind css on the top of bootstrap, so when purging the css  also purges  the bootstrap modal class, which are undetermined for Tailwind parser that the classes are exists. So we explicitly defines not to purge classes of patter modal.

First Post:

Install purgecss-webpack-plugin and glob-all using npm


npm install purgecss-webpack-plugin --save-dev
npm install glob-all --save-dev

const mix = require('laravel-mix');
var tailwindcss = require('tailwindcss');
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");

// Custom PurgeCSS extractor for Tailwind that allows special characters in
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
    }
}

mix.postCss('resources/css/tailwind.css', 'public/css', [
    tailwindcss('./tailwind.config.js'),
]);

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

mix.sass('resources/sass/laradash/laradash.scss', 'public/laradash/css');

// Only run PurgeCSS during production builds for faster development builds
// and so you still have the full set of utilities available during
// development.
if (mix.inProduction()) {
    mix.webpackConfig({
        plugins: [
            new PurgecssPlugin({
                // Specify the locations of any files you want to scan for class names.
                paths: glob.sync([
                    path.join(__dirname, "resources/views/**/*.blade.php"),
                    path.join(__dirname, "resources/js/**/*.vue")
                ]),
                extractors: [{
                    extractor: TailwindExtractor,

                    // Specify the file extensions to include when scanning for
                    // class names.
                    extensions: ["html", "js", "php", "vue"]
                }]
            })
        ]
    });
}



Profile Image

Prosperous Nepal is possible only from technological innovation.


© 2020, All right reserved.