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"]
        }
      ]
    })
  ]
});

@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! 👍