Tailwind任意值不支持变量：为何bg-[#5ad0a1]可用而变量形式失效？

核心原因 #

Tailwind CSS的自定义属性（比如bg-[#5ad0a1]）是构建时静态扫描生成的。它会在编译阶段遍历你代码里所有明确写死的[]内的数值，把这些值转换成对应的CSS类。

但你用bg-[${color}]这种JS变量插值时，编译阶段Tailwind根本不知道color的具体值是什么，没法提前生成对应的CSS类，所以页面上自然找不到这个样式，也就不会生效。

解决办法 #

方法一：用Tailwind自定义颜色配置 #

把需要的颜色写到tailwind.config.js的主题配置里，这样就能像用内置颜色一样直接调用类名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-green': '#5ad0a1',
      },
    },
  },
}

之后直接用bg-custom-green和text-custom-green，不管是直接写还是赋值给变量都能正常生效：

<span className="inline-flex items-center rounded-md bg-custom-green px-2 py-2 text-md font-base text-custom-green">
  {params?.value}
</span>

方法二：用行内样式（适合动态颜色场景） #

如果颜色是完全动态的（比如从接口获取），直接用React的行内样式传递颜色值，绕过Tailwind的类扫描：

<span 
  style={{ backgroundColor: color, color: color }}
  className="inline-flex items-center rounded-md px-2 py-2 text-md font-base"
>
  {params?.value}
</span>

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