Tailwind 清除不使用 PHP 渲染样式

Question

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

问题是，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;

在上面的示例中，唯一可用的高度 class 是 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

恐怕清除CSS 不会运行您的代码并且不能'see' 这些类。所以它不会将它们添加到 CSS 文件中。

根据 'Writing purgeable HTML' here

上的 Tailwind 文档

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.

Tailwind 清除不使用 PHP 渲染样式

Tailwind purge not rendering styles with PHP

php

wordpress

advanced-custom-fields

tailwind-css

laravel-mix