Working with Tailwind + PurgeCSS - anyone managed it?

Hi

I’m working with Tailwind to build a theme (based on https://github.com/AbsoluteWebServices/vuetique-theme - thanks guys!) and I’m currently trying to integrate PurgeCSS so that it removes the unused CSS, but don’t seem to be having much luck, and I just wondered if anyone had any success with it to give me any pointers?

So far, I have purgecss-webpack-plugin and glob-all installed, and have the following in webpack.client.config.ts (just so I can test locally):

{
...
plugins: [
...
new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './../../src/themes/<theme>/components/*.vue'),
        path.join(__dirname, './../../src/themes/<theme>/components/**/*.vue'),
      ])
    }),
...
]}

Any help would be much appreciated - thanks!

OK, I got it sorted over the weekend

For reference, if anyone else is interested, in core/build/webpack.base.config.ts:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    path.join(themeRoot, '/components/theme/*.vue'),
    path.join(themeRoot, '/components/theme/**/*.vue')
  ],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

const postcssConfig = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: loader => [
      require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
      require('postcss-flexbugs-fixes'),
      require('autoprefixer')({
        flexbox: 'no-2009'
      }),
      ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
    ]
  }
}

Also requires you to add the @fullhuman/postcss-purgecss package.

Seem to have an issue where it’s stripping out more CSS then it should be, but that’s for another issue board!!