问题

将 `tailwind.config.js` 设置如下以指定自定义颜色。

```javascript
theme: {
    extend: {
      colors: {
        "text-gray": "#747474",  😊 在其自身上运行。
        "text-black": "#212121", 😊 在其自身上运行。
　　　　 "text-black2": "#212121", 哑巴颜色
      },
    },
  },

text-gray 和 text-black 单独使用时可以正常工作，但如果您使用类名动态更改颜色，例如 isSelected，则不起作用。

import classNames from "classnames";

interface PlayerSelectionProps {
  isSelected?: boolean;
}

export function PlayerSelection({
  isSelected = false,
}: PlayerSelectionProps): JSX.Element {
  return (
    <p
      className={classNames("mb-2 mt-4 text-text-gray md:text-lg", {
        "text-text-black": isSelected,  😊 // 与 text-black-2 一起使用时起作用。
      })}
    >
      示例文本
    </p>
  );
}

为什么在使用某个组件时会应用 text-text-gray？我查看了一些参考链接，但没有给我太多线索。

• https://stackoverflow.com/questions/71647859/tailwind-css-certain-custom-colors-are-not-working
• https://tailwindcss.com/docs/content-configuration#safelisting-classes

<details>
<summary>英文:</summary>

Set up `tailwind.config.js` as follows to specify custom colours. 


```javascript
theme: {
    extend: {
      colors: {
        &quot;text-gray&quot;: &quot;#747474&quot;,  &#128582; Works on its own.
        &quot;text-black&quot;: &quot;#212121&quot;, &#128582; Works on its own.
　　　　 &quot;text-black2&quot;: &quot;#212121&quot;, dummy color
      },
    },
  },

text-gray and text-black work fine on their own, but do not work if you take a boolean value such as isSelected and try to change the colour dynamically using classnames.

    import classNames from "classnames";
    
    interface PlayerSelectionProps {
      isSelected?: boolean;
    }
    
    export function PlayerSelection({
      isSelected = false,
    }: PlayerSelectionProps): JSX.Element {
      return (
        <p
          className={classNames("mb-2 mt-4 text-text-gray md:text-lg", {
            "text-text-black": isSelected,  🙆 // With text-black-2 it works.
          })}
        >
          sample text
        </p>
      );
    }

Why is text-text-gray applied when using a certain component like this? I looked at some reference links, but nothing gave me much of a clue.

• https://stackoverflow.com/questions/71647859/tailwind-css-certain-custom-colors-are-not-working
• https://tailwindcss.com/docs/content-configuration#safelisting-classes

答案1

得分: 1

这里的问题是，当 isSelected 是真值时，你正在应用两个具有相同变体上下文并应用相同属性的类，因此会发生冲突。在它们具有相同特异性时，最后在 CSS 源顺序中定义的样式会胜出：

.text-red {
  color: red;
}

.text-green {
  color: green;
}

所以在你的情况下，考虑在任何时候只应用 text-text-gray 或 text-text-black 中的一个：

<p
  className={classNames("mb-2 mt-4 md:text-lg", {
    "text-text-black": isSelected,
    "text-text-gray": !isSelected,
  })}
>

.text-red {
  color: red;
}

.text-green {
  color: green;
}

<div class="text-red text-green">Foo<div>
<div class="text-green text-red">Foo<div>

<p
  className={classNames("mb-2 mt-4 md:text-lg", {
    "text-text-black": isSelected,
    "text-text-gray": !isSelected,
  })}
>