Webpack config for Statamic, Tailwind CSS, and PurgeCSS

webpack.mix.js

const {mix} = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const glob = require('glob-all');
const PurgecssPlugin = require('purgecss-webpack-plugin');

mix
    .js('js/src/theme-name.js', 'js/theme-name.js')
    .sass('sass/theme-name.scss', 'css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.js')],
    })
    .browserSync({
        proxy: 'https://site-name.localhost',
        files: [
            'templates/*.html',
            'layouts/*.html',
            'partials/*.html',
            'js/src/theme-name.js',
        ],
    });

class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-z0-9-:\/]+/g) || [];
    }
}

if (mix.inProduction()) {
    mix.webpackConfig({
        plugins: [
            new PurgecssPlugin({
                paths: glob.sync([
                    path.join(__dirname, 'templates/*.html'),
                    path.join(__dirname, 'partials/*.html'),
                    path.join(__dirname, 'layouts/*.html'),
                    // path.join(__dirname, 'js/.js'),
                ]),
                extractors: [
                    {
                        extractor: TailwindExtractor,

                        extensions: ['html', 'js', 'php', 'vue'],
                    },
                ],
                whitelist: [
                    'h2',
                    'h3',
                    'p',
                    'blockquote',
                    'cta-primary',
                    'cta-secondary'
                ],
            }),
        ],
    });
}

See Line 46 to 52 for an example of whitelisting classes that are dynamically inserted by Statamic. Or, in this case where I've directly styled some elements.