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

我正在React中开发一个组件，它接受 colored颜色 、十六进制值作为字符串，它应该在我的组件内设置各种样式，包括状态悬停、之前和之后、焦点以及自定义 Select 器中. 简而言之，我需要动态、任意的造型. 我很清楚Tailwind并不很好地支持动态类，但您知道，如果它支持，我的一些类看起来会是这样的:

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

我try 在tailwind 中进行安全列表，就像这样:

 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，但内联样式不支持 Select 器.

所以感觉我就像走在了死胡同，这应该是相当简单和常见的事情，所以我不知道. 所以我的最后一个问题是:

Is is possible to create a React component that accepts a color as a hex value and it will dynamically and arbitrarly style stuff inside this component (even using selectors, including custom ones)? If so, how?