为何React中动态拼接的decoration-${颜色}类无法正常生效？

问题原因 #

Tailwind的JIT（即时编译）模式只会扫描代码中明确写出的完整类名，像你用decoration-${decorationColor}这种动态拼接的写法，编译工具没法提前预知最终生成的类名，所以不会把这些动态类编译进最终样式文件。而bg-${xxx}能生效，是因为项目里已经直接用过bg-primary、bg-secondary这类完整类名，Tailwind已经把它们纳入编译范围了。

具体解决办法 #

• 枚举所有可能的类名（推荐小范围场景）
  把所有可能用到的下划线颜色类都通过条件判断明确写出来，让Tailwind能扫描到：

  <span className={`underline underline-offset-4 decoration-4 ${
    decorationColor === 'secondary' ? 'decoration-secondary' : 
    decorationColor === 'primary' ? 'decoration-primary' : 
    'decoration-primary'
  }`}> {sentence.text}</span>
  

• 添加安全列表（适合多颜色/不确定场景）
  在tailwind.config.js里配置safelist，强制让Tailwind编译指定的类：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    safelist: [
      'decoration-primary',
      'decoration-secondary',
      // 这里可以加其他需要动态使用的decoration颜色类
    ],
    theme: { extend: {} },
    plugins: [],
  }
  

• 结合内联样式使用Tailwind颜色变量
  用内联样式设置下划线颜色，直接引用Tailwind的颜色CSS变量：

  <span 
    className="underline underline-offset-4 decoration-4"
    style={{ textDecorationColor: `var(--tw-color-${decorationColor || 'primary'})` }}
  >
    {sentence.text}
  </span>
  

  注：如果项目没自动生成颜色变量，可以手动在Tailwind配置里定义，或者直接使用具体颜色值（比如#xxxxxx）。

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