TailwindCSS写在Twig变量内的类无法被PurgeCSS识别如何解决

方案1：修改现有PurgeCSS提取器规则 #

你当前使用的默认提取器仅能匹配直接写在class属性中的类名，无法识别Twig数组、addClass方法内引号包裹的类，修改defaultExtractor规则即可兼容：

purgecss({
  mode: "layers",
  content: ["templates/**/*.twig", "src/scss/**/*.scss"],
  defaultExtractor: (content) => {
    // 同时匹配普通类 + 单/双引号包裹的类名字符串
    const matches = content.match(/[\w-/:]+(?<!:)|'([\w-/:]+)'|"([\w-/:]+)"/g) || []
    // 移除匹配结果中的引号，仅保留类名
    return matches.map(match => match.replace(/['"]/g, ''))
  },
  // 可选配置：如果存在变量拼接生成的动态类，添加到安全列表避免被误删
  safelist: {
    // 示例：保留所有bg-、font-开头的类，可根据业务需求调整规则
    patterns: [/^bg-/, /^font-/]
  }
})

如果你的类是通过变量拼接生成的（例如'bg-' ~ color），无法被静态扫描识别，必须手动添加到safelist规则中。

方案2：升级到Tailwind CSS v3（更推荐） #

Tailwind CSS v3已经内置JIT引擎和内容扫描逻辑，原生支持识别Twig模板中数组、addClass方法内的类名，无需额外配置PurgeCSS。你可以移除gulp流程中的purgecss插件，仅需要在tailwind.config.js中配置content字段即可：

// tailwind.config.js
module.exports = {
  content: [
    "./templates/**/*.twig",
    "./src/scss/**/*.scss"
  ],
  // 其余原有配置保持不变
}

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