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']
          }
        ]
      })
    ]
  })
}

@reinink @snellingio FullHuman/purgecss#19 (comment)

Adding this code, whenever I run yarn run prod, there will be an strange unrelated error:
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to ".../.../..." Seems like the plugin has a conflict with babel-loader.
(Error doesn't appear when yarn run dev)

For anyone who is running in the same error as @ctf0 this little terminal command will help you find the blank files.

find . -empty

In case anyone having the blank files issue comes across this.

It should be return content.match(/[A-z0-9-:\/]+/g) || []

Was looking at this issue: FullHuman/purgecss#30
Is it possible to use this extractor with Gulp? I have lots of classes like this:

cell-1\/2\@desktop {
   width: 50%;
}

In my Gulpfile I have this:

gulp.task('prod-sass', function () {
  // Delete old CSS files
  del(['static/css/**/*']);
  gulp.src('src/sass/**/*.scss')
    .pipe(sass({
      outputStyle : 'compressed'
    }))
   .pipe(
      purgecss({
        content: ['public/**/*.html'],
       extractors: {
        extractor: [/[A-z0-9-:\/]+/g)]
        }
      })
    )
    .pipe(gulp.dest('static/css'))
});

This doesn't seem to be working for me. Have I missed something?

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...