Skip to content

Instantly share code, notes, and snippets.

@nerdcave
Last active May 11, 2021 12:27
Show Gist options
  • Save nerdcave/ade26d701060d93e95ec83ddf58784b5 to your computer and use it in GitHub Desktop.
Save nerdcave/ade26d701060d93e95ec83ddf58784b5 to your computer and use it in GitHub Desktop.
PurgeCSS config for Rails 5 and Webpacker (along with Tailwind CSS and Vue.js, in this case)
// 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
@kishba
Copy link

kishba commented Sep 25, 2018

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

@jean-francois-labbe
Copy link

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

@scottwater
Copy link

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.

@jhixson
Copy link

jhixson commented May 22, 2019

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 *

@andresespinosapc
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment