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 = [

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: [
  whitelist: [
  extractors: [
      extractor: TailwindExtractor,
      extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
Brandon Pittman

Hello, there! I'm Brandon. I'm originally from Ohio, but now I live in Nagoya, Japan. I love the Web, programming, coffee, cooking and A Song of Ice and Fire.

My usual toolset is Vue.js, Gridsome and Tailwind. I'm interested in building web sites and applications using the JAMstack.