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:

How can I make the <h1> elements take on the next line if the width of the parent element becomes too small?

I’m working on the following AppSidebar() component using TailwindCSS.