反应中带有 Tailwind 的动态类名

我正在制作简单的“todo”项目来提高我的反应技能，其中之一是选择任务卡的颜色，但我不明白为什么我的方法不起作用。这里的code:

import React from "react";

const TaskCard: React.FC = () => {
  let color = "sky";
  return (
    <div>
      <div className="bg-white h-[80px] w-[100%] flex flex-row rounded-md">
        <div className={`p-1 bg-${color}-400`}></div>
      </div>
    </div>
  );
};

export default TaskCard;

这只是我的问题的代码示例${}不起作用，当我硬编码时它起作用。

不建议在 Tailwind 中使用动态类，因为 Tailwind 使用树摇动。这意味着源文件中未声明的任何类都不会在输出文件中生成。

使用 Tailwind 时最好使用完整的类名。从有关的文档动态类:

Tailwind 如何提取类名最重要的含义是 它只会找到作为完整不间断字符串存在的类 在你的源文件中。

作为最后的手段，Tailwind 提供了一种称为将类列入安全名单。您可以使用 safelist 在 tailwind 输出文件中包含特定类。

在您的示例中，您可以使用常用表达包括您想要使用的所有颜色pattern。您可以强制 Tailwind 创建variants还有：

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /bg-(red|green|blue)-(400)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
}