React-TailwindCSS EventModel组件颜色异常：仅蓝色显示问题求助

问题原因 #

Tailwind CSS的JIT（即时编译）模式只会打包代码中明确写出的类名。你用bg-${lblClass}-100这种动态拼接方式生成类名时，Tailwind无法提前识别所有可能的颜色类，因此除了项目中已经明确使用过的（比如bg-blue-100可能在别处出现过），其他颜色的类不会被编译到最终样式里。浏览器找不到对应样式，就会显示默认的灰色背景。

解决方案 #

方案1：用注释标记需要的类

在项目的CSS文件或组件代码里添加注释，列出所有需要的颜色类，Tailwind会识别注释中的类并编译：

/* 强制Tailwind编译这些背景色类 */
/* bg-indigo-100 bg-gray-100 bg-blue-100 bg-pink-100 bg-purple-100 bg-red-100 */
/* 如果需要700权重的类也加上 */
/* bg-indigo-700 bg-gray-700 bg-blue-700 bg-pink-700 bg-purple-700 bg-red-700 */

方案2：配置Tailwind安全列表（推荐）

在tailwind.config.js中添加safelist配置，强制Tailwind编译指定的类：

module.exports = {
  safelist: [
    // 100权重的背景色
    'bg-indigo-100',
    'bg-gray-100',
    'bg-blue-100',
    'bg-pink-100',
    'bg-purple-100',
    'bg-red-100',
    // 700权重的背景色（如果需要）
    'bg-indigo-700',
    'bg-gray-700',
    'bg-blue-700',
    'bg-pink-700',
    'bg-purple-700',
    'bg-red-700',
  ],
  // 其他Tailwind配置...
}

方案3：改用静态完整类名

直接在数组中定义完整的Tailwind类名，避免动态拼接：

const labelsClasses = [
  "bg-indigo-700",
  "bg-gray-700",
  "bg-blue-700",
  "bg-pink-700",
  "bg-purple-700",
  "bg-red-700",
];

渲染时直接使用数组中的类：

<span
  key={i}
  className={`${lblClass} w-5 h-5 rounded-full flex items-center justify-center cursor-pointer`}
>
  <span className='material-icons-outlined text-black text-sm'>
    check
  </span>
</span>

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