Tailwind CSS无法识别动态生成的任意颜色值问题求助

我想根据用户角色切换文本颜色，使用React的useState钩子更新元素类名。目前类名已成功更新，但Tailwind CSS无法识别动态生成的text-[#xxx]这类任意颜色类，导致颜色未发生变化。

代码示例 #

import React, { useState } from 'react';

const RoleSelector = () => {
  const roles = [
    'STUDENT',
    'INSTRUCTOR',
    'PARENT',
    'ADMINISTRATOR',
    'SERVICES',
    'COMMUNITY',
    'PUBLIC',
  ];

  const RoleColorMapper = {
    'STUDENT': '#b667aa',
    'INSTRUCTOR': '#4e90ca',
    'PARENT': '#689d52',
    'ADMINISTRATOR': '#caa646',
    'SERVICES': '#e13b47',
    'COMMUNITY': '#4cd1af',
    'PUBLIC': '#e06c1a',
  };

  const RoleColorMapperSelected = {
    'STUDENT': '#370a37',
    'INSTRUCTOR': '#112a40',
    'PARENT': '#112a0a',
    'ADMINISTRATOR': '#5a4308',
    'SERVICES': '#5a080e',
    'COMMUNITY': '#043b38',
    'PUBLIC': '#4f2100',
  };

  const [ userRole, changeUserRole ] = useState('STUDENT');

  return (
    <div className="flex flex-col items-end">
      {roles.map((r) => (
        <div
          key={r}
          className={`${
            r === userRole
              ? `bg-white rounded-l-lg bg-white shadow-md p-4`
              : `px-4 py-4 text-[${RoleColorMapperSelected[r]}]`
          } mt-4`}
        >
          <button
            className={`${
              r === userRole
                ? `text-[${RoleColorMapperSelected[r]}]`
                : `text-[${RoleColorMapper[r]}]`
            }`}
            onClick={() => changeUserRole(r)}
          >
            {r}
          </button>
        </div>
      ))}
    </div>
  );
};

export default RoleSelector;

Tailwind配置文件（tailwind.config.js） #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

比如text-[#112a40]这类类未被Tailwind CSS检测到。

方法1：把角色颜色预定义到Tailwind配置（推荐） #

Tailwind的JIT编译器只会扫描静态存在的类名，动态拼接的text-[#xxx]不会被识别。最规范的做法是把所有角色颜色添加到Tailwind的主题扩展里：

1. 修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
      colors: {
        role: {
          student: '#b667aa',
          studentSelected: '#370a37',
          instructor: '#4e90ca',
          instructorSelected: '#112a40',
          parent: '#689d52',
          parentSelected: '#112a0a',
          administrator: '#caa646',
          administratorSelected: '#5a4308',
          services: '#e13b47',
          servicesSelected: '#5a080e',
          community: '#4cd1af',
          communitySelected: '#043b38',
          public: '#e06c1a',
          publicSelected: '#4f2100',
        }
      }
    },
  },
  plugins: [],
}

2. 调整React组件的颜色映射，直接使用预定义的类名：

import React, { useState } from 'react';

const RoleSelector = () => {
  const roles = [
    'STUDENT',
    'INSTRUCTOR',
    'PARENT',
    'ADMINISTRATOR',
    'SERVICES',
    'COMMUNITY',
    'PUBLIC',
  ];

  const RoleColorMapper = {
    'STUDENT': 'text-role-student',
    'INSTRUCTOR': 'text-role-instructor',
    'PARENT': 'text-role-parent',
    'ADMINISTRATOR': 'text-role-administrator',
    'SERVICES': 'text-role-services',
    'COMMUNITY': 'text-role-community',
    'PUBLIC': 'text-role-public',
  };

  const RoleColorMapperSelected = {
    'STUDENT': 'text-role-studentSelected',
    'INSTRUCTOR': 'text-role-instructorSelected',
    'PARENT': 'text-role-parentSelected',
    'ADMINISTRATOR': 'text-role-administratorSelected',
    'SERVICES': 'text-role-servicesSelected',
    'COMMUNITY': 'text-role-communitySelected',
    'PUBLIC': 'text-role-publicSelected',
  };

  const [ userRole, changeUserRole ] = useState('STUDENT');

  return (
    <div className="flex flex-col items-end">
      {roles.map((r) => (
        <div
          key={r}
          className={`${
            r === userRole
              ? 'bg-white rounded-l-lg shadow-md p-4'
              : 'px-4 py-4'
          } mt-4`}
        >
          <button
            className={`${
              r === userRole
                ? RoleColorMapperSelected[r]
                : RoleColorMapper[r]
            }`}
            onClick={() => changeUserRole(r)}
          >
            {r}
          </button>
        </div>
      ))}
    </div>
  );
};

export default RoleSelector;

方法2：直接使用style属性 #

如果不想修改Tailwind配置，可以跳过类名，直接通过style属性设置文本颜色：

// 修改组件中按钮的代码
<button
  style={{
    color: r === userRole ? RoleColorMapperSelected[r] : RoleColorMapper[r]
  }}
  onClick={() => changeUserRole(r)}
>
  {r}
</button>

方法3：静态列举所有颜色类（hack方式） #

如果一定要用text-[#xxx]格式，可以在组件里加一个隐藏元素，把所有可能的颜色类静态写出来，让Tailwind扫描到：

// 在组件return的最外层添加
<div className="hidden">
  {Object.values(RoleColorMapper).map(color => `text-[${color}]`).join(' ')}
  {Object.values(RoleColorMapperSelected).map(color => `text-[${color}]`).join(' ')}
</div>

这种方式不够优雅，仅作为临时方案。

核心原因 #

Tailwind的JIT模式在编译时会静态扫描代码里的所有类名，动态拼接的字符串类名在编译阶段无法被识别，因此不会生成对应的CSS样式。前面两种方法都能避开这个限制，推荐使用方法1，更符合Tailwind的设计规范。

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