-
-
Save nerdcave/ade26d701060d93e95ec83ddf58784b5 to your computer and use it in GitHub Desktop.
// 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 |
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 :(
Thanks for the snippet, but it also remove normalize.css imported by tailwind, how can you tell purgecss to ignore it?