How to stop purging tailwind components

Question

I am using TailwindCSS and Laravel Mix. I am trying to setup PurgeCSS and I have got it reading my template files (working with WordPress) and purge any CSS not within the template files.

However, as part of Tailwind, I am using @apply in my scss files and those utilities I am applying are also being purged which leaves me with a non functioning site.

My sass files are in css/dev and there is an app.scss and then directories with more files within them (base, utilities, custom, components).

My webpack.mix.js file configuration is as follows:

mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'],
    'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss({
        enabled: mix.inProduction(),
        // Your custom globs are merged with the default globs. If you need to
        // fully replace the globs, use the underlying `paths` option instead.
        globs: [
            path.join(__dirname, 'template-parts/*.php'),
            path.join(__dirname, '*.php'),
            path.join(__dirname, 'css/dev/*.scss'),
            path.join(__dirname, 'css/dev/**/*.scss'),
        ],
        extensions: ['html', 'js', 'php', 'scss', 'css'],
    });

As you can see, I tried setting the paths for purgeCss to look inside the css paths but that has not worked.

Does anyone know how to achieve this?

Answer 1

The issue was with WordPress classes not being included in the template files and then being purged. The solution was switching to using UnCSS which allowed me to setup URLS for UnCSS to visit and it won't purge any classes used on those pages. I also included some standard WordPress classes which I found a list of online.

My final config is:

const uncss = require('postcss-uncss');

mix.js('js/dev/app.js', 'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js'),
            ...process.env.NODE_ENV === 'production' ? [uncss({
                html: [
                    './*.php',
                    './template-parts/*.php',
                    'https://www.example.com',
                    'https://www.example.com/work/',
                    'https://www.example.com/work/example-project/',
                    'https://www.example.com/contact/',
                    'https://www.example.com/blog/',
                    'https://www.example.com/blog/laravel-php-framework/',
                ],
                ignore: [
                    '.rtl',
                    '.home',
                    '.blog',
                    '.archive',
                    '.date',
                    '.error404',
                    '.logged-in',
                    '.admin-bar',
                    '.no-customize-support',
                    '.custom-background',
                    '.wp-custom-logo',
                    '.alignnone',
                    '.alignright',
                    '.alignleft',
                    '.wp-caption',
                    '.wp-caption-text',
                    '.screen-reader-text',
                    '.comment-list',
                    '.grecaptcha-badge',
                    /^search(-.*)?$/,
                    /^(.*)-template(-.*)?$/,
                    /^(.*)?-?single(-.*)?$/,
                    /^postid-(.*)?$/,
                    /^attachmentid-(.*)?$/,
                    /^attachment(-.*)?$/,
                    /^page(-.*)?$/,
                    /^(post-type-)?archive(-.*)?$/,
                    /^author(-.*)?$/,
                    /^category(-.*)?$/,
                    /^tag(-.*)?$/,
                    /^tax-(.*)?$/,
                    /^term-(.*)?$/,
                    /^(.*)?-?paged(-.*)?$/,
                    '.animate',
                    '.animated',
                    '.bounce',
                    '.fadeInDown',
                    '.fadeIn',
                    '.fadeInUp',
                    '.jackInTheBox',
                ]
            })] : [],
        ]
    });

I also made use of the UnCSS exclude from purge CSS comments:

/* uncss:ignore start */

my css goes here

/* uncss:ignore end */

I ended up using this on all my custom sass files except for the tailwind files so that the only selectors that are purged are tailwind utilities, which saved me about 300 KB.