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

We have some views rendered by Rails itself (instead of just Vue) so we found we had to add a few additional paths to the PurgecssPlugin config:

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'),
    path.join(__dirname, '../../app/views/**/*.erb'),
  ]),
  extractors: [ // if using Tailwind
    {
      extractor: TailwindExtractor,
      extensions: ['html', 'js', 'vue', 'erb']
    }
  ]
}));

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

Any suggestions on having the MD5 of the CSS getting updated after 'purging'?

It looks like the hash of the file is based on the pre-purge content. If you deploy and run your CSS on a CDN you would need to explicitly flush the cache or change something in the CSS file to for the hash to change.

This is not a big issue outside of Tailwind, but since the goal of Tailwind is to not write a bunch of CSS, you make a lot of changes in views which do not ultimately affect the pre-purge hash.

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 :(