反应中带有 Tailwind 的动态类名

Question

我正在制作简单的“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;

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

Answer 1

不建议将动态类与 Tailwind 一起使用，因为 Tailwind 使用 tree-shaking。 这意味着任何未在源文件中声明的类都不会在输出文件中生成。

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

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

作为最后的手段，Tailwind 提供了一种叫做Safelisting classes的东西。 您可以使用安全列表在顺风输出文件中包含特定类。

在您的示例中，您可以使用正则表达式来包含您想要使用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'],
    },
  ],
}

Answer 2

我使用以下类型的示例代码效果很好，您需要使用clsx连接类，我已经能够访问 Tailwind UI 附带的一些模板，它们往往会做类似的事情。

import React from 'react';
import clsx from 'clsx';

const variants: { [key: string]: string } = {
  sky: 'bg-sky-400',
  grass: 'bg-grass-400',
  fire: 'bg-fire-400',
};

const TaskCard: React.FC<{ variant: string }> = ({ variant }) => {
  return (
    <div>
      <div className="bg-white h-[80px] w-[100%] flex flex-row rounded-md">
        <div className={clsx('p-1', variants[variant])}></div>
      </div>
    </div>
  );
};

export default TaskCard;

你也可以用更多的类构建你的组件变体，如果你想看到更深入的东西，我写了一篇关于这个主题的文章： https ://morganfeeney.com/how-to/create-tailwind-component -变体使用反应