Purging your Tailwind

#tailwindcss  #purgecss 

If you set up PurgeCSS with Tailwind CSS as documented, you'll purge the resets for elements you then style later. If you purge only when NODE_ENV=production, your prod builds will look different from your dev builds.

The explanation and fix didn't fit in the footnote, so this whole blog post is for these three lines of code:

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

If you're coming here searching for how to purge only when NODE_ENV=production, set up your postcss.config.js like this:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./content/**/*.md', './layouts/**/*.html'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' ? purgecss : null
  ].filter(s => s !== null)
}