Custom Background color not applied properly

[novel182]

Hi, I am trying to add a set of background colors on the components with bg-[{color}].
I have a file that exports the colors as strings and I import it on different files (ex: import {primary} from 'colors').
But trying to add the className on the component with this variable does not work. I am trying className={`text-center mt-12 pb-5 bg-[${primary}]`}
But explicitly using stating the color string in the className works. Like className={`text-center mt-12 pb-5 bg-[#A0C878]`}
Both of these turn out to be the same HTML with class="text-center mt-12 pb-5 bg-[#A0C878]"

[wongjn]

As per the documentation:

Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

❌ Don't construct class names dynamically

<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

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:

❌ Don't use props to build class names dynamically

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

For your case, I'd use the style attribute:

<div style={{ backgroundColor: primary }}>

[rozsazoltan]

Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?