Run after gatsby-plugin-postcss to allow usage with TailwindCSS about gatsby-plugin-purgecss HOT 3 CLOSED

Yeah, I should have explained: TailwindCSS is a utility-first (aka. functional, atomic) CSS library. It adds some useful custom directives (e.g. @apply) that need to be converted to vanilla CSS syntax by PostCSS before the CSS can be used.

TailwindCSS generates a LOT of utility classes (to make it easy to prototype quickly) and recommends using PurgeCSS to remove any that are unused.

To use TailwindCSS with Gatsby v2, you just use gatsby-plugin-postcss and add TailwindCSS to your postcss pipeline (before autoprefixer):

gatsby-config.js

// ...
plugins: [
  `gatsby-plugin-postcss`,
]
// ...

postcss.config.js

// ...
module.exports = {
  plugins: [
    // ...
    require(`tailwindcss`)(`./src/styles/tailwind.js`),
    require(`autoprefixer`)()
  ]
}
// ...

The above is enough to get TailwindCSS working, but doesn't solve the class-bloat issue, which is where PurgeCSS comes in.

Ideally, PurgeCSS will only run in production (so it doesn't slow down HMR in development). Here's the code (provided by @jquense in this issue) that achieves that in Gatsby v2:

gatsby-node.js

const PurgeCssPlugin = require(`purgecss-webpack-plugin`)
const path = require(`path`)
const glob = require(`glob`)

const PATHS = {
  src: path.join(__dirname, `src`)
}

const purgeCssConfig = {
  paths: glob.sync(`${PATHS.src}/**/*.js`, { nodir: true }),
  extractors: [
    {
      // Custom extractor to allow special characters (like ":") in class names
      // See: https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css-with-purgecss
      extractor: class {
        static extract(content) {
          return content.match(/[A-Za-z0-9-_:/]+/g) || []
        }
      },
      extensions: [`js`]
    }
  ],
  whitelist: [],
  whitelistPatterns: [/html/, /body/]
}

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (stage.includes(`develop`)) return

  // Add PurgeCSS in production
  if (stage.includes(`build`)) {
    actions.setWebpackConfig({
      plugins: [new PurgeCssPlugin(purgeCssConfig)]
    })
  }
}

With this setup, I'm basically good to go on my end, but I wanted to share it in case it helps gatsby-plugin-purgecss become a one-stop shop for anyone who wants to use PurgeCSS with Gatsby (including those who need to run PostCSS first).

Let me know if anything above could be improved and feel free to use anything that might help this project.

from gatsby-plugin-purgecss.

@ooloth Sorry for the late action.
This plugin will now run after postcss (added in v3)
Tailwind is now supported using the tailwind: true option. Please try it out, your feedback will be appreciated.

from gatsby-plugin-purgecss.

plugin cannot be used with postcss

It does not work with postcss syntax based plugins like postcss-preset-env. But something like autoprefixer should and does work (if you modify the gatsby webpack config). I don't know if tailwind does css syntax modifications so I can't comment if that is the issue.
Also it may not work with gatsby-plugin-postcss as it did not exist when I was making this plugin and I have not checked it out.
Could you describe exactly what error did you face?

Is there a reason for this order?

I initially started with running this plugin after postcss. But at the time, how to include postcss plugins in Gatsby 2 (alpha) wasn't clear. I don't remember the details but this plugin would fail parsing files after postcss, not always but on some projects.
But now that the code is more stable, debugging is easier and gatsby-plugin-postcss is available, I'll look at it again.
Do you have any Gatsby project repo with tailwind setup (as a postcss plugin) that I could use?

from gatsby-plugin-purgecss.