Using Purgecss with Tailwind and Laravel Mix

webpack.mix.js

let cssImport = require('postcss-import')
let cssNext = require('postcss-cssnext')
let glob = require('glob-all')
let mix = require('laravel-mix')
let purgeCss = require('purgecss-webpack-plugin')
let tailwind = require('tailwindcss')

mix.js('resources/assets/js/app.js', 'public/js')
  .postCss('resources/assets/css/app.css', 'public/css/app.css', [
    cssImport(),
    tailwind('tailwind.js'),
    cssNext({ features: { autoprefixer: false }}),
  ])
  .version()

if (mix.inProduction()) {
  mix.webpackConfig({
    plugins: [
      new purgeCss({
        paths: glob.sync([
          path.join(__dirname, 'resources/views/**/*.blade.php'),
          path.join(__dirname, 'resources/assets/js/**/*.vue')
        ]),
        extractors: [
          {
            extractor: class {
              static extract(content) {
                return content.match(/[A-z0-9-:\/]+/g)
              }
            },
            extensions: ['html', 'js', 'php', 'vue']
          }
        ]
      })
    ]
  })
}

I got an annoying bug where Webpack tried to read in directories. Apparently I had one named "chart.js" and that got read in as it had .js in its end.

I fixed it using this option:

if(mix.inProduction())
{
    mix.webpackConfig({
        plugins: [
            new purgeCss({
                paths: glob.sync([
                    path.join(__dirname, 'resources/views/**/*.blade.php'),
                    path.join(__dirname, 'resources/assets/js/**/*.js'),
                    path.join(__dirname, 'resources/assets/theme/js/**/*.js')
                ], {
                    nodir: true,
                }),
                extractors: [
                    {
                        extractor: class {
                            static extract(content) {
                                return content.match(/[A-z0-9-:\/]+/g)
                            }
                        },
                        extensions: ['html', 'js', 'php', 'vue']
                    }
                ]
            })
        ]
    });

}

Notice the "nodir: true" option object...