PurgeCSS config for Rails 5 and Webpacker (along with Tailwind CSS and Vue.js, in this case)

environment.js

// first run:
// yarn add glob-all purgecss-webpack-plugin --dev

/*
  config/webpack/environment.js
  PurgeCSS configuration for Rails 5 + Webpacker + Tailwind CSS + Vue.js

  Optionally, put this in production.js if you only want this to apply to production.
  For example, your app is large and you want to optimize dev compilation speed.
*/

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue') // if using Vue.js
const path = require('path')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

environment.loaders.append('vue', vue) // if using Vue.js


// ensure classes with special chars like -mt-1 and md:w-1/3 are included
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g);
  }
}

environment.plugins.append('PurgecssPlugin', new PurgecssPlugin({
  paths: glob.sync([
    path.join(__dirname, '../../app/javascript/**/*.vue'), // if using Vue.js
    path.join(__dirname, '../../app/javascript/**/*.js'),
  ]),
  extractors: [ // if using Tailwind
    {
      extractor: TailwindExtractor,
      extensions: ['html', 'js', 'vue']
    }
  ]
}));

module.exports = environment

Thanks for the snippet, but it also remove normalize.css imported by tailwind, how can you tell purgecss to ignore it?

I had to wrap the import with PurgeCSS's ignore comment.

/* purgecss start ignore */
@import 'tailwindcss/preflight';
/* purgecss end ignore *

Including this removes all my Tailwind css. Do you know how can I debug what's happening? The only way I know right now is to deploy to staging, because I don't have the needed configuration to run production in local :(