Tailwind JIT 搭配PHP动态拼接类名时样式无法渲染问题求助

Tailwind JIT 模式依赖静态扫描源码中的完整类名字符串生成对应样式，你通过PHP逻辑拼接出来的sm:h-xxx、lg:h-xxx类名，在扫描阶段不存在完整的字符串匹配，所以不会生成对应的样式。你观察到的h-14生效只是巧合，大概率是项目其他位置已经用到了这个类，和是否带断点前缀无关。

下面按优先级给你提供可落地的方案：

方案1：配置Tailwind安全列表（最常用） #

直接在tailwind.config.js中添加safelist配置，把所有可能用到的间隔类加入白名单，强制Tailwind生成这些样式：

// tailwind.config.js
module.exports = {
  content: [
    // 确认这里已经包含了你所有的PHP文件路径，示例：
    "./webroot/wp-content/themes/qore/**/*.php",
    "./src/assets/**/*.js"
  ],
  safelist: [
    // 匹配所有h-开头的高度类
    { pattern: /^h-([0-9]|[1-9][0-9])$/ },
    // 匹配sm前缀的高度类
    { pattern: /^sm:h-([0-9]|[1-9][0-9])$/ },
    // 匹配lg前缀的高度类
    { pattern: /^lg:h-([0-9]|[1-9][0-9])$/ },
  ]
  // 其他原有配置保持不变
}

如果你的间隔高度可选范围是固定的（比如最小h-4，最大h-40），可以把正则写的更精准，避免生成无用的样式文件。

方案2：静态标注所有可能的类名 #

如果可选的间隔高度数量很少，你可以直接在当前spacer块的PHP文件顶部，用注释写出所有可能用到的完整类名，Tailwind扫描时会识别注释中的类名：

<?php
<!-- 预定义spacer可用类：h-14 sm:h-19 lg:h-28 h-16 sm:h-21 lg:h-32 ... 把所有可能用到的类都写在这里 -->
$group = !empty(get_sub_field('spacer')) ? get_sub_field('spacer') : $args;
// 后续原有代码保持不变

方案3：改用内联样式实现（完全规避类名问题） #

如果你不想维护白名单，也可以直接通过CSS变量+内联样式实现间隔效果，不需要依赖动态生成Tailwind类：
首先在你的全局样式文件中加入通用样式：

.spacer {
  height: var(--spacer-mobile, 1rem);
}
@screen sm {
  .spacer {
    height: var(--spacer-sm, 2rem);
  }
}
@screen lg {
  .spacer {
    height: var(--spacer-lg, 3rem);
  }
}

然后修改你的PHP代码，直接计算对应高度值输出：

<?php
$group = !empty(get_sub_field('spacer')) ? get_sub_field('spacer') : $args;
if (!empty($group['value'])) :
    $val = intval(str_replace('h-', '', $group['value']));
    // Tailwind默认1单位=0.25rem，直接换算成rem值
    $h_mobile = round($val / 2) * 0.25 . 'rem';
    $h_sm = round($val / 3 * 2) * 0.25 . 'rem';
    $h_lg = $val * 0.25 . 'rem';
?>
<div class="spacer relative body-font w-full" 
     style="--spacer-mobile: <?php echo $h_mobile ?>; --spacer-sm: <?php echo $h_sm ?>; --spacer-lg: <?php echo $h_lg ?>">
</div>
<?php endif; ?>

• Tailwind v3已经内置了内容扫描和无用样式清理功能，不需要额外安装laravel-mix-purgecss包，如果你已经安装可以卸载，避免配置冲突。
• 配置修改后需要重启编译服务，新的配置才会生效。

内容的提问来源于stack exchange，提问作者Loosie94