Trouble with Dynamic Color in Tailwind Component

I'm having trouble understanding why the blue color is not working in my component. Could you please help me troubleshoot this issue on Stack Overflow? I have a Tag component that should apply different background and text colors based on the color prop provided. However, when I set the color prop to "blue", the expected blue color is not being applied to the component. I have tried various solutions, including dynamically constructing the class names and using the correct syntax for Tailwind CSS classes. However, I have been unsuccessful in resolving the issue. Any guidance or suggestions would be greatly appreciated. Thank you in advance for your assistance!

    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>
      );
    }```



</details>


# 答案1
**得分**: 2

根据[文档](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)：

> Tailwind提取类名的最重要影响是它只会在源文件中作为_完整不间断字符串_存在的类名。
>
> 如果您使用字符串插值或连接部分类名在一起，Tailwind将无法找到它们，因此不会生成相应的CSS：
>
> **不要动态构建类名**
>
> ```vue
> <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
> ```
>
> 在上面的示例中，字符串`text-red-600`和`text-green-600`不存在，因此Tailwind不会生成这些类。
> 相反，确保您使用的任何类名都完整存在：
>
> **始终使用完整的类名**
>
> ```vue
> <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
> ```

您可以：
 - 将整个类放在传递给 `className` 的变量中，如下所示：
   ```jsx
   export default function Tag({ index, tag, color = "bg-red-200 text-red-700" }) {
     return (
       <li
         key={index}
         className={`… ${color}`}
        >

• 为 color 创建一个字典以映射到Tailwind类名，如下所示：

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

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

  export default function Tag({ index, tag, color = "red" }) {
    const styles = {
      // 从`color`变量转换
    };
    // …
    return (
      <li
        key={index}
        className="…"
        style={style}
       >
  

• 如果您有一组已知的颜色，可以使用safelist这些类，示例如下：

  module.exports = {
    safelist: [
      { pattern: /^text-(red|green|blue)-700$/ },
      { pattern: /^bg-(red|green|blue)-200$/ },
      // …
    ],
    // …
  };