Laravel Mix: Tailwind CSS + PurgeCSS Example

webpack.mix.js

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

/**
 * Custom PurgeCSS Extractor
 * https://github.com/FullHuman/purgecss
 * https://github.com/FullHuman/purgecss-webpack-plugin
 */
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g);
  }
}

mix.postCss("./src/styles.css", "public/css", [tailwindcss("./tailwind.js")]);
mix.webpackConfig({
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, "resources/views/**/*.blade.php"),
        path.join(__dirname, "resources/assets/js/**/*.vue")
      ]),
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ["html", "js", "php", "vue"]
        }
      ]
    })
  ]
});

Requires glob-all and purgecss-webpack-plugin NPM packages. use npm or yarn to install.

Thank you so much. This is huge, er, small. ;)

I’m not that familiar with mix.webpackConfig: is there a way to target a specific file when we want to optimize only one among many?

Hey @ockam, just to clarify, are you wanting to run PurifyCSS on only one CSS file among many other CSS files?

@andrewdelprete yes, exactly.

Hey @ockam, you should be able to specify multiple mix.postCss() calls in Mix.

...
mix.postCss("./src/a.css", "public/css")
   .postCss("./src/b.purged.css", "public/css", [tailwindcss("./tailwind.js")]);

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#multiple-builds

Because PurgeCSS is a PostCSS plugin, it will still run on every mix.postCss() call you provide. I haven't tried this, but one possible way to isolate PurgeCSS is to provide a styleExtensions prop to the plugin.

new PurgecssPlugin({
  paths: glob.sync([
    path.join(__dirname, "resources/views/**/*.blade.php"),
    path.join(__dirname, "resources/assets/js/**/*.vue")
  ]),
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ["html", "js", "php", "vue"]
    }
  ],
  styleExtensions: ['.purged.css']
});

https://github.com/FullHuman/purgecss-webpack-plugin#usage

@FullHuman is this correct? Could you theoretically add a main.purged.css file and have the PurgeCSS webpack plugin only optimize it and skip other css files provided in the build?

@andrewdelprete

I did some testing with your idea and it doesn’t appear to work. :(

There is an issue opened on Laravel Mix about purgecss. I cross my finger and hope something can come out of it.

@ockam - Gotcha! that makes sense. I posted a comment there! That particular issue has to do with him not running his css through Webpack and is just combining together with Mix.combine().

This is brilliant @andrewdelprete. Thanks! 👍

yeah, thanks a lot!
purgecss together with tailwind is the best thing ever happend! 👍