How to get Tailwind's built-in CSS Purge to purge plugin CSS

Question

I'm including Tailwind CSS in my project using PostCSS, and have Tailwind's built-in Purge implementation working great for the core library (in style.pcss below). However, I am also including @tailwind/typography as a plugin and its selectors aren't being purged.

// postcss.config.js

const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'), 
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
  ]
}

// tailwind.config.js

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: [
    './build/*.html',
    './build/**/*.html'
  ],
}

// style.pcss

@tailwind base;
@tailwind components;
@tailwind utilities; 

Answer 1

I Ran into the same thing!

There is a note about this on the typography README:

https://github.com/tailwindlabs/tailwindcss-typography#purging-unused-styles

...and more details in the tailwindscss documentation:

https://tailwindcss.com/docs/controlling-file-size#removing-all-unused-styles

Here is what your tailwind.config.js should probably look like:

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: {
    enabled: true,
    mode: 'all',
    content: [
      './build/*.html',
      './build/**/*.html'
    ],
    options: {
      whitelist: []
    }
  },
}