React+Tailwind中模板字符串拼接className样式不显示问题

原因 #

Tailwind CSS 采用静态类名扫描机制：构建工具会在编译时遍历代码中所有明确写出的完整类名，生成对应的CSS样式。而你通过模板字符串动态拼接类名（如from-${mainStyles.color}）的写法，Tailwind无法在构建阶段识别出from-lime-800这类具体的完整类名，因此不会生成对应的样式规则——哪怕浏览器元素上显示的类名正确，也没有可应用的CSS。

解决办法 #

方案1：直接映射完整Tailwind类名 #

修改typesStyles，将每个类型对应的颜色值改为完整的Tailwind渐变类名：

const typesStyles = {
    bug: {
        fromClass: 'from-lime-800',
        toClass: 'to-lime-800'
    },
    // 其他类型按此格式定义
}

组件中直接拼接完整类名：

<div className={`bg-gradient-to-b ${mainStyles.fromClass} from-50% ${secondaryStyles.toClass} to-50% mx-auto flex flex-col p-4 my-4 w-1/2`}>
  {/* 内容 */}
</div>

这种方式能让Tailwind在构建时扫描到所有完整类名，正常生成样式。

方案2：使用内联样式结合颜色值 #

如果不想维护大量完整类名，可以直接在typesStyles中存储颜色的十六进制值，通过style属性设置渐变：

const typesStyles = {
    bug: {
        color: '#729f3f' // lime-800对应的十六进制颜色
    },
    // 其他类型对应颜色值
}

组件中使用内联样式：

<div 
  className="mx-auto flex flex-col p-4 my-4 w-1/2"
  style={{
    background: `linear-gradient(to bottom, ${mainStyles.color} 50%, ${secondaryStyles.color} 50%)`
  }}
>
  {/* 内容 */}
</div>

这种方式绕开Tailwind的类名扫描，直接通过原生CSS实现渐变效果。

方案3：通过CSS自定义类封装渐变 #

在全局CSS文件中用@apply指令定义每个类型的渐变类：

/* 全局CSS文件 */
.bg-type-bug {
  @apply bg-gradient-to-b from-lime-800 from-50% to-lime-800 to-50%;
}
/* 其他类型的渐变类 */
.bg-type-fire {
  @apply bg-gradient-to-b from-red-600 from-50% to-orange-500 to-50%;
}

修改typesStyles存储自定义类名：

const typesStyles = {
    bug: {
        gradientClass: 'bg-type-bug'
    },
    fire: {
        gradientClass: 'bg-type-fire'
    }
}

组件中直接应用自定义类：

<div className={`${mainStyles.gradientClass} mx-auto flex flex-col p-4 my-4 w-1/2`}>
  {/* 内容 */}
</div>

内容的提问来源于stack exchange，提问作者Juan Manuel Zimmermann