Whenever I find myself needing to style my React elements, I end up using the style attribute instead of className. None of the examples I've come across seem to apply styles that fit my specific needs. Can you shed some light on why this happens and offer a solution?
I have gone through the documentation (https://tailwindcss.com/docs/content-configuration#dynamic-class-names), but my scenario involves allowing the user to choose a color from a color picker, and then updating the background accordingly. It's not practical for me to assign a separate "bg-[colorValue]" class for every possible color, so I resort to concatenating the value with "bg-[" afterwards. This is because I can't map all colors to full classnames.
const red500 = "red-500";
const red600Hex = "#dc2626";
const bgColor = "bg-[" + red600Hex + "]";
const bgColor2 = "bg-[" + "#dc2626" + "]";
function App() {
return (
<>
<h1 style={{ backgroundColor: red500 }}>Hello</h1>
<h1 style={{ backgroundColor: red600Hex }}>Hello</h1>
<h1 style={{ backgroundColor: `[${red600Hex}]` }}>Hello</h1>
<h1 style={{ backgroundColor: bgColor }}>Hello</h1>
<h1 style={{ backgroundColor: bgColor2 }}>Hello</h1>
</>
);
}