在 React 中使用 Tailwind 自定义组件着色

Question

我正在 React 中开发一个组件，它接受颜色、十六进制值作为字符串，并且它应该对组件内的各种内容进行样式设置，包括状态悬停、之前和之后、焦点以及自定义选择器。 简而言之，我需要动态、任意的样式。 我很清楚 Tailwind 不能很好地支持动态类，但只是让你知道，如果它支持的话，我的一些类将如下所示：

before:border-t-[${color}]
hover:text-[${color}]
data-[state=open]:text-[${color}]
bg-[${color}]
hover:bg-[${color}]

我尝试在顺风中加入安全列表，如下所示：

 safelist: [
    "dark",
    {
      pattern: /border-[^/]+$/,
      variants: [
        "dark",
        "hover",
        "focus",
        "dark:hover",
        "dark:focus",
        "before",
        "after",
        "data-[state=open]",
      ],
    },
    {
      pattern: /text-[^/]+$/,
      variants: [
        "dark",
        "hover",
        "focus",
        "dark:hover",
        "dark:focus",
        "before",
        "after",
        "data-[state=open]",
      ],
    },
    {
      pattern: /bg-[^/]+$/,
      variants: [
        "dark",
        "hover",
        "focus",
        "dark:hover",
        "dark:focus",
        "before",
        "after",
        "data-[state=open]",
      ],
    },
  ],

但这不起作用。

解决方案是设置内联样式，而不是使用 Tailwind，但内联样式不支持选择器。

所以感觉我走进了死胡同，这应该是很容易和常见的事情，所以我不知道。 所以我的最后一个问题是：

是否可以创建一个接受颜色作为十六进制值的 React 组件，并且它将动态且任意地设置该组件内的内容样式（甚至使用选择器，包括自定义选择器）？如果是的话，怎么办？

Answer 1

对于真正的动态颜色值，您需要使用内联样式。

safelist

正则表达式仅适用于配置值，例如

text-red-500

。 Tailwind 无法将现有的每个颜色值编译为任意值 – 数量将是无限的。

对于您提到的每个具有变体的类，您可以使用 CSS 变量：

before:border-t-[${color}]

<div
  class="before:border-t-[--color]"
  style={{ '--color': color }}
>

hover:text-[${color}]

<div
  class="hover:text-[--color]"
  style={{ '--color': color }}
>

data-[state=open]:text-[${color}]

<div
  class="data-[state=open]:text-[--color]"
  style={{ '--color': color }}
>

hover:bg-[${color}]

<div
  class="hover:bg-[--color]"
  style={{ '--color': color }}
>

然后对于

bg-[${color}]

，您可以使用内联样式：

<div style={{ backgroundColor: color }}>

尽管您也可以为此使用 CSS 变量，尽管它感觉多余（但在您的组件中可能有意义）：

<div
  class="bg-[--color]"
  style={{ '--color': color }}
>