Tailwind自定义Button组件动态样式被Purge清除的合规实现问询

Tailwind的Purge工具只识别静态存在的完整类名，动态拼接生成的类名无法被扫描到，以下是三种可落地的实现方案：

方案1：预定义颜色类映射表（优先推荐） #

提前枚举所有允许使用的颜色对应的完整Tailwind类名，全程无动态拼接，Purge可以正常识别所有用到的类：

// 预定义所有支持的颜色对应的样式类
const buttonColorMap = {
  green: 'bg-green-100 hover:bg-green-300',
  blue: 'bg-blue-100 hover:bg-blue-300',
  red: 'bg-red-100 hover:bg-red-300',
  // 其他业务需要的颜色统一在这里补充
}

function Button ({ color = 'green' }) {
  return (
    <button className={buttonColorMap[color]}>
      {/* 按钮插槽内容 */}
    </button>
  )
}

优势：

• 所有类名静态存在，不会被Purge误删
• 可以限制传入的颜色范围，避免出现不符合设计规范的颜色值
• 最终打包的CSS只会包含用到的类，体积最小

方案2：配置Tailwind safelist白名单 #

如果需要支持的颜色非常多，不想逐一写映射，可以在Tailwind配置中添加安全列表，强制保留符合规则的类：

// tailwind.config.js
module.exports = {
  // 其他原有配置
  safelist: [
    { pattern: /^bg-.+-100$/ },
    { pattern: /^hover:bg-.+-300$/ }
  ]
}

注意：该方案会保留所有匹配规则的颜色类，会增大最终CSS体积，仅在需要支持大量颜色时使用。

方案3：使用CSS变量+固定类名 #

如果需要完全动态的颜色支持，也可以用CSS变量绑定样式，类名全程固定，不需要依赖Purge扫描动态类：

function Button ({ color }) {
  return (
    <button 
      className="bg-[--btn-bg] hover:bg-[--btn-hover-bg]"
      style={{
        '--btn-bg': `rgb(var(--color-${color}-100))`,
        '--btn-hover-bg': `rgb(var(--color-${color}-300))`
      }}
    >
      {/* 按钮插槽内容 */}
    </button>
  )
}

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