Webpack: Tailwind CSS + PurgeCSS Example

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
const glob = require("glob-all");
const 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);
  }
}

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "styles.css"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [{ loader: "css-loader", options: { importLoaders: 1 } }, "postcss-loader"]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
    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"]
        }
      ]
    })
  ]
};

Hey @pxwee5, I believe if your app is not using some of the selectors within the html files you provide than they'll be removed. I'm pretty sure you can whitelist the ones it's removed if necessary.

Oh, how did I miss that bit? Working example.

  plugins: [
    new ExtractTextPlugin("styles.css"),
    new PurgecssPlugin({
      whitelist: ['body', '.whitelisted-class'],
      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"]
        }
      ]
    })
  ]