React中API返回值的Tailwind bg-[props]动态背景色无法渲染问题

问题原因 #

Tailwind是编译时CSS工具，它会在构建阶段扫描代码中的类名并生成对应的CSS规则。你用bg-[${props.colorRight}]这种完全动态生成的类名，由于编译时无法预知API返回的具体颜色值，Tailwind不会生成对应的CSS，所以颜色无法渲染。

解决方案 #

最直接且适配动态API颜色的方案是使用内联样式，绕过Tailwind的编译限制：

修改你的EventCard组件代码：

<div style={{ backgroundColor: props.colorRight }} className="flex relative overflow-hidden rounded-t-lg">
    <div style={{ backgroundColor: props.colorLeft }} className="absolute w-8/12 left-0 right-0 top-0 bottom-0 skew-x-[45deg] -mx-[20%]">

其他可选方案（仅适用于颜色值可预知的场景） #

如果你的API返回的颜色是固定的几个值，可以提前在tailwind.config.js中配置自定义颜色，然后使用静态类名：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'event-left': '#DC2626',
        'event-right': '#059669',
        // 添加其他已知颜色
      },
    },
  },
}

之后在组件中直接用bg-event-left、bg-event-right这类静态类名即可。

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