Tailwind 组件中动态颜色的问题

Question

我无法理解为什么蓝色在我的组件中不起作用。您能帮我解决 Stack Overflow 上的这个问题吗？我有一个标签组件，应该根据提供的颜色属性应用不同的背景和文本颜色。但是，当我将颜色属性设置为“蓝色”时，预期的蓝色不会应用于组件。我尝试了各种解决方案，包括动态构建类名以及对 Tailwind CSS 类使用正确的语法。然而，我一直没有成功解决这个问题。任何指导或建议将不胜感激。预先感谢您的帮助！

    import React from "react";
    
    export default function Tag({ index, tag, color = "red" }) {
      return (
        <li
          key={index}
          className={`inline-flex items-center rounded-full px-3 py-2 text-xs font-bold uppercase bg-${color}-200 text-${color}-700`}
        >
          <a href={`/?=${tag.text.replace(/\s/g, "_").toLowerCase()}`}>
            {tag.text}
          </a>
        </li>
      );
    }```

Answer 1

根据文档：

\n

\n

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

\n

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

\n

Don\xe2\x80\x99t 动态构造类名

\n

<div class="text-{{ error ? \'red\' : \'green\' }}-600"></div>\n

\n

在上面的示例中，字符串text-red-600和text-green-600不存在，因此 Tailwind 将不会生成这些类。\n相反，请确保您\xe2\x80\x99 使用的任何类名完整存在：

\n

始终使用完整的类名

\n

<div class="{{ error ? \'text-red-600\' : \'text-green-600\' }}"></div>\n

\n

\n

你可以：

\n

\n

• 将整个类放在您传递给className喜欢的变量中

  \n

  export default function Tag({ index, tag, color = "bg-red-200 text-red-700" }) {\n  return (\n    <li\n      key={index}\n      className={`\xe2\x80\xa6 ${color}`}\n     >\n

  \n
\n

• color有一个Tailwind 类名的字典：

  \n

  export default function Tag({ index, tag, color = "red" }) {\n  const DICTIONARY = {\n    red: \'bg-red-200 text-red-700\',\n    // \xe2\x80\xa6\n  };\n  // \xe2\x80\xa6\n  return (\n    <li\n      key={index}\n      className={`\xe2\x80\xa6 ${DICTIONARY[color]}`}\n     >\n

  \n
\n

• 使用该style属性来实现真正的动态颜色，如果theme可以转换为有效的 CSS 颜色值（或者您可以从 Tailwind 获取颜色）：

  \n

  export default function Tag({ index, tag, color = "red" }) {\n  const styles = {\n    // Convert from `color` variable\n  };\n  // \xe2\x80\xa6\n  return (\n    <li\n      key={index}\n      className="\xe2\x80\xa6"\n      style={style}\n     >\n

  \n
\n

• safelist类，如果您的已知颜色数量有限：

  \n

  export default function Tag({ index, tag, color = "bg-red-200 text-red-700" }) {\n  return (\n    <li\n      key={index}\n      className={`\xe2\x80\xa6 ${color}`}\n     >\n

  \n
\n

\n