I’m developing a component in React that accepts a color, a hex value as a string, and it should style various things inside my component, including states hover, before and after, focus, and in custom selectores as well.
In short, I need dynamic, arbitrary styling.
I’m well aware Tailwind does not support dynamic classes very well, but just so you know, if it did, some of my classes would look like:

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

I tried safelisting in tailwind, like this:

 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]",
      ],
    },
  ],

But it doesnt work.

A solution would be to set styles inline, instead of using Tailwind, but inline styles doesnt support selectors.

So It feels like I am at a dead end, and that this is something that should be quite easy and common, so I dont know.
So my final question is:

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?