Tailwind自定义颜色仅在Angular生产构建环境失效如何解决

问题原因 #

这个问题是Tailwind的生产环境样式裁剪（旧版叫Purge）机制导致的，符合「开发环境正常、生产环境部分样式丢失」的典型特征：

• Tailwind开发模式默认关闭样式裁剪，所有你配置的颜色对应的工具类都会完整打包，所以所有颜色都能正常显示
• 生产模式默认开启静态扫描裁剪，只会保留在你指定的purge路径文件中、能被静态识别到的完整类名，未被识别的类会被直接移除

你配置的unassessed色系异常，大概率是以下两种情况之一：

1. 你使用了字符串拼接的方式生成unassessed相关的类名，比如类似`bg-unassessed-${level}`的写法，Tailwind的静态扫描无法识别动态拼接的类名，就会把对应的样式删掉；其他色系的类名是直接写死的可以被识别，所以能正常生效
2. 用到unassessed色系的文件没有被你配置的purge规则覆盖到，比如文件路径不在./src/**/*.html、./src/**/*.ts的匹配范围内

解决方案 #

方案1：修改类名写法（优先推荐） #

不要用字符串拼接生成类名，改为全量映射的写法，让Tailwind可以静态识别到对应的类：

// 错误写法，无法被扫描识别
const getBgClass = (color, level) => `bg-${color}-${level}`

// 正确写法，所有用到的类名都是静态存在的，可以被扫描到
const bgClassMap = {
  success: {
    50: 'bg-success-50',
    100: 'bg-success-100'
  },
  warning: {
    50: 'bg-warning-50',
    100: 'bg-warning-100'
  },
  unassessed: {
    50: 'bg-unassessed-50',
    100: 'bg-unassessed-100'
  }
}

方案2：将unassessed色系加入安全列表 #

如果确实需要动态生成类名，可以在Tailwind配置中把该色系加入安全列表，强制Tailwind保留对应的样式：

// Tailwind v2 配置写法
module.exports = {
  purge: {
    content: ['./src/**/*.html', './src/**/*.ts'],
    options: {
      safelist: [
        /^bg-unassessed-/,
        /^text-unassessed-/,
        /^border-unassessed-/
        // 按需补充你用到的工具类前缀即可
      ]
    }
  },
  // 其余原有配置保持不变
}

// Tailwind v3 配置写法
module.exports = {
  content: ['./src/**/*.html', './src/**/*.ts'],
  safelist: [
    /^bg-unassessed-/,
    /^text-unassessed-/,
    /^border-unassessed-/
  ],
  // 其余原有配置保持不变
}

方案3：排查路径匹配规则 #

检查用到unassessed色系的文件路径，确认是否被你的purge/content规则覆盖，比如如果有.js后缀的配置文件用到了该色系，需要在路径规则中补充对应的文件后缀匹配。

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