Tailwind and PurgeCSS Config for Gridsome

Published February 25th, 2019 1m read time

So, I wrote Gridsome plugins for Tailwind and PurgeCSS a little while ago. Since I wrote said plugins, Gridsome added css.loaderOptions to gridsome.config.js, making the need for a Tailwind plugin really unnecessary. I'd also argue that a plugin for PurgeCSS is also probably too much at this point. Here are my config files that I'm using. If you're not bothering with PurgeCSS, it's almost a one-liner to add Tailwind.

// gridsome.config.js
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwind = require('tailwindcss')

const postcssPlugins = [
  tailwind('./tailwind.js'),
]

if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss())

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: postcssPlugins,
      },
    },
  },
}

// purgecss.config.js

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\\/]+/g)
  }
}

module.exports = {
  content: [
    './src/**/*.vue',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.html',
    './src/**/*.pug',
    './src/**/*.md',
  ],
  whitelist: [
    'body',
    'html',
    'img',
    'a',
    'g-image',
    'g-image--lazy',
    'g-image--loaded',
  ],
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
    },
  ],
}