@layer内CSS规则因Purge未生效？WordPress场景解决方案咨询

你的推测完全正确：Tailwind的内容安全移除（原Purge）机制会仅保留扫描文件中出现过的类名。由于.input-group是通过WordPress区块动态注入页面的，未出现在静态HTML或默认扫描范围内的文件中，因此被Purge移除——而放在@layer内的自定义类会被Tailwind更严格地校验，未被扫描到的类定义会直接被剔除。

以下是无需禁用Purge的解决方案：

1. 扩展扫描范围覆盖WordPress动态内容源 #

修改tailwind.config.js的content数组，将WordPress主题、插件、自定义区块的相关文件加入扫描范围，让Tailwind能捕获到动态输出的类名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './wp-content/themes/你的主题目录/**/*.php',
    './wp-content/plugins/目标插件目录/**/*.php',
    './wp-content/blocks/自定义区块目录/**/*.{php,jsx}', // 适配不同区块开发方式
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

只要类名出现在这些文件的代码（比如PHP的echo、JSX的className）中，Tailwind就会保留对应的样式，包括@layer内的定义。

2. 用SafeList强制保留特定类 #

如果部分类是完全动态生成（比如从数据库读取类名），无法通过文件扫描覆盖，可在tailwind.config.js中通过safelist强制保留：

module.exports = {
  // 其他配置项
  safelist: [
    'input-group',
    // 支持正则匹配批量类，例如保留所有margin-bottom类：/^mb-/
  ],
}

配置后，无论该类是否被扫描到，都会被保留在最终CSS文件中。

3. 确认@layer样式文件的引入路径 #

自定义@layer样式要放在Tailwind构建流程能识别的文件中。比如在项目入口CSS文件中引入包含@layer定义的文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

@import './styles/custom-components.css'; // 假设你的@layer定义在这里

确保入口CSS文件被正确纳入Tailwind的编译流程。

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