Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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

This comment has been minimized.

Copy link

jean-francois-labbe commented Jan 5, 2019

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

@scottwater

This comment has been minimized.

Copy link

scottwater commented Jan 28, 2019

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

This comment has been minimized.

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 *
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.