Tailwind 清除不使用 PHP 呈现样式

Question

在一个新的 WordPress 项目中，我使用带有 ACF 灵活（块）内容的 Tailwind CSS。
现在我创建了一个“间隔”块，可以在其他块之间使用。

问题是，Tailwind JIT 没有正确清除 PHP 文件。 如果我回显像“h-20”或“sm:h-40”这样的完整字符串，我的效果很好，但是当我使用一些 PHP 过滤器创建字符串时，它就不起作用了。

例如：

<?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;

在上面的示例中，唯一可用的高度等级是 h-14。我想是因为这不使用断点？不确定。

我正在使用 Laravel Mix 来编译我的 SASS 和 JS。
这是我的配置：

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();
}

我不确定我应该进行哪些更改才能使其正常工作。我检查过： https://github.com/spatie/laravel-mix-purgecss 但这似乎完全被忽略了。

希望你们中的一个人知道该怎么做。

谢谢！

Answer 1

恐怕 purgeCSS 不会运行您的代码并且无法“看到”这些类。所以它不会将它们添加到 CSS 文件中。

根据 Tailwind 文档“编写可清除的 HTML”here

这意味着避免在模板中使用字符串连接动态创建类字符串很重要，否则 PurgeCSS 将不知道保留这些类。