Tailwind自定义颜色在classNames动态切换时不生效的问题

我在tailwind.config.js中配置了如下自定义颜色：

theme: {
    extend: {
      colors: {
        "text-gray": "#747474",  🙆 单独使用正常。
        "text-black": "#212121", 🙆 单独使用正常。
        "text-black2": "#212121", 测试颜色
      },
    },
  },

其中text-gray和text-black单独使用时均正常，但当我使用classNames结合isSelected布尔值尝试动态切换颜色时，text-text-black无法生效，而换成text-black2就能正常工作：

import classNames from "classnames";

interface PlayerSelectionProps {
  isSelected?: boolean;
}

export function PlayerSelection({
  isSelected = false,
}: PlayerSelectionProps): JSX.Element {
  return (
    <p
      className={classNames("mb-2 mt-4 text-text-gray md:text-lg", {
        "text-text-black": isSelected,  // 使用text-black2时正常。
      })}
    >
      sample text
    </p>
  );
}

为什么text-text-gray能正常应用，但动态切换的text-text-black不行？

原因分析 #

核心问题是自定义颜色名和Tailwind内置类名冲突：
Tailwind本身自带原生的text-black类（对应颜色值#000000），当你定义了名为text-black的自定义颜色后，使用text-text-black时，Tailwind的JIT编译器会优先将其解析为「text- + 内置text-black类」，而非你自定义的text-black颜色变量，导致生成的样式不符合预期。而text-black2是完全独有的名称，没有和内置类冲突，所以能被编译器正确识别。

另外，text-text-gray能正常工作，是因为Tailwind没有内置名为text-gray的颜色类（内置的是gray色系，比如text-gray-500），所以编译器会正确识别text-gray为你的自定义颜色，进而解析text-text-gray为对应样式。

解决方案 #

方案1：修改自定义颜色命名（推荐）

避免自定义颜色名和Tailwind内置类重名，比如将text-black改为dark-primary：

// tailwind.config.js
theme: {
    extend: {
      colors: {
        "text-gray": "#747474",
        "dark-primary": "#212121", // 重命名避免冲突
        "text-black2": "#212121",
      },
    },
  },

然后在组件中使用text-dark-primary：

className={classNames("mb-2 mt-4 text-text-gray md:text-lg", {
  "text-dark-primary": isSelected,
})}

方案2：覆盖内置颜色

如果不想修改命名，可以直接在theme根节点下定义colors，覆盖Tailwind内置的black颜色值：

// tailwind.config.js
theme: {
  colors: {
    black: "#212121", // 直接覆盖内置black颜色
    "text-gray": "#747474",
    "text-black2": "#212121",
  },
  // 其他extend配置可以保留在extend里
  extend: {
    // 比如字体、间距等其他自定义配置
  },
},

之后在组件中直接使用text-black即可实现动态切换：

className={classNames("mb-2 mt-4 text-text-gray md:text-lg", {
  "text-black": isSelected,
})}

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