如何在Tailwind CSS类中集成自定义randomColor函数？

问题根源 #

Tailwind CSS在构建阶段会扫描代码中所有静态编写的类名来生成对应CSS，像bg-[${randomColor()}]这种动态拼接的类名，Tailwind无法识别，自然不会生成样式。另外你的randomColor函数随机数逻辑存在问题：数组索引从0开始，Math.floor(Math.random() * bgColor.length) + 1会导致索引超出数组范围（比如数组长度为9时，最大索引是8，+1后可能得到9，对应undefined）。

解决方法1：使用内联样式（最简单直接） #

放弃动态拼接Tailwind类，改用style属性直接设置背景色，不受Tailwind构建扫描限制：

{task?.tags?.length > 0 &&
  task?.tags?.map((tag) => (
    <li key={tag}>
      <span
        className="inline-block h-5 whitespace-nowrap rounded-[45px] px-2.5 text-sm capitalize text-[#F4F5F6]"
        style={{ backgroundColor: randomColor() }}
      >
        {tag}
      </span>
    </li>
  ))}

同时修正randomColor函数的随机数逻辑：

const bgColor = [
  "#0B956C",
  "#1C6FBD",
  "#BC1C1E",
  "#8D4615",
  "#0695B7",
  "#6110A7",
  "#99630F",
  "#14B9B2",
  "#99630F",
];

export function randomColor() {
  const randomIndex = Math.floor(Math.random() * bgColor.length);
  return bgColor[randomIndex];
}

解决方法2：提前定义Tailwind自定义颜色（保持类名写法） #

如果坚持要用Tailwind类名的方式，先在tailwind.config.js中把所有颜色定义为自定义颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        tag: {
          1: "#0B956C",
          2: "#1C6FBD",
          3: "#BC1C1E",
          4: "#8D4615",
          5: "#0695B7",
          6: "#6110A7",
          7: "#99630F",
          8: "#14B9B2",
          9: "#99630F",
        },
      },
    },
  },
  plugins: [],
};

修改randomColor函数返回对应的类名：

export function randomColorClass() {
  const randomIndex = Math.floor(Math.random() * 9) + 1; // 对应tag-1到tag-9
  return `bg-tag-${randomIndex}`;
}

最后在组件中使用：

{task?.tags?.length > 0 &&
  task?.tags?.map((tag) => (
    <li key={tag}>
      <span
        className={`inline-block h-5 whitespace-nowrap rounded-[45px] px-2.5 text-sm capitalize text-[#F4F5F6] ${randomColorClass()}`}
      >
        {tag}
      </span>
    </li>
  ))}

这样Tailwind在构建时能扫描到所有bg-tag-*类，生成对应的CSS样式。

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