How can I change text color on hover while using template literals?

I have the following piece of code:

<div
  id={id}
  className={`rounded-lg bg-background-section h-72 p-4 flex flex-col items-center relative hover:bg-background-highlight hover:text-[${color}] transition ease-in-out`}
>
  Hello there
</div>

I'm rendering multiple instances of that div, getting a different color value for each one. Thing is, the hover doesn't work until I manually set the color that I want in the code:

Example:

hover:text-[#7cc327]

Save, go to the browser to test it out (it works just fine).

Go back and restore the code to its original form:

hover:text-[${color}]

And now it takes the color from the variable. I ve to do the same thing for all the 9 colors that I have, but its just a waste of time cause it shouldn't work that way and also... it stops working whenever I restart the dev server.

Any idea of whats going on?

As per the documentation:

> The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
>
> If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
>
> Don’t construct class names dynamically
>
> vue
> <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
>
> In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
> Instead, make sure any class names you’re using exist in full:
>
> Always use complete class names
>
> vue
> <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
>

You could consider using a full class names whereever color is declared (ensuring that this code is covered in the content file globs too):

const color = `hover:text-[#7cc327]`;
…
<div className={`… ${color} …`}>

Otherwise, if the color value is going to be truly dynamic or the above method cannot work for your use case, you could use the style attribute like:

<div
  className={`… hover:text-[color:--color] …`}
  style={{ '--color': color }}
>