Tailwind purge not rendering styles with PHP

Question

In a new WordPress project I'm using Tailwind CSS with ACF flexible (block) content.
Now I've created a "spacer" block, that can be used in between other blocks.

The thing is, Tailwind JIT is not purging the PHP file correctly. I works good if I echo out the full sting like "h-20" or "sm:h-40", but when I'm creating the string with some PHP filters, it won't work.

For example:

<?php

$group = !empty(get_sub_field('spacer')) ? get_sub_field('spacer') : $args;

if (!empty($group['value'])) :
    
    $val = intval(str_replace('h-', '', $group['value'])); // input = h-28 , output = 28
    $val_half = 'h-' . round($val / 2);
    $val_third = 'sm:h-' . round($val / 3 * 2);
    $val_full = 'lg:h-' . $val;
    $spacing = $val_half . ' ' . $val_third . ' ' . $val_full; // output = h-14 sm:h-19 lg:h-28
    ?>

    <!-- Spacer -->
    <div class="spacer relative body-font w-full <?php echo $spacing; ?>"></div>  

<?php endif;

In the example above, the only available height class is h-14. I think because this doen't use a breakpoint? Not sure.

I'm using Laravel Mix for compiling my SASS and JS.
Here's my config:

const mix = require('laravel-mix');
const local = require('./src/assets/js/utils/local-config');

const domain = 'fides.test';
const homedir = require('os').homedir();

require('laravel-mix-versionhash');
require('laravel-mix-tailwind');

mix.setPublicPath('./webroot/wp-content/themes/qore/dist');

mix.webpackConfig({
    externals: {
        "jquery": "jQuery",
    }
});

if (local.proxy) {
    mix.browserSync({
        watch: true,
        proxy: 'https://' + domain,
        host: domain,
        open: 'external',
        injectChanges: true,
        https: {
            key: homedir + "/.config/valet/Certificates/" + domain + ".key",
            cert: homedir + "/.config/valet/Certificates/" + domain + ".crt"
        },
        files: [
            './webroot/wp-content/themes/qore/**/*.{json,php,twig,blade.php}',
            './src/assets/**/*.{html,js,vue}',
        ],
        callbacks: {
            ready: function (err, bs) {
                console.log('callbacks');
                mix.sass('./src/assets/scss/style.scss', 'css');
            }
        }
    });
}

mix.tailwind();
mix.copy('./src/assets/fonts', './webroot/wp-content/themes/qore/dist/fonts');
mix.copy('./src/assets/img/', './webroot/wp-content/themes/qore/dist/img');
mix.copy('./src/assets/videos', './webroot/wp-content/themes/qore/dist/videos');
mix.js('./src/assets/js/vendor.js', 'js');
mix.js('./src/assets/js/script.js', 'js');
mix.sass('./src/assets/scss/style.scss', 'css');

if (mix.inProduction()) {
    // mix.versionHash();
    mix.sourceMaps();
}

I am not sure what I should change to make this get to work. I've checked: https://github.com/spatie/laravel-mix-purgecss but that seems to be ignored completely.

Hope one of you guys know what to do.

Thanks!

Answer 1

I'm afraid purgeCSS does not run your code and cannot 'see' these classes. So it's not adding them to the CSS file.

As per the Tailwind documentation on 'Writing purgeable HTML' here

That means that it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes.