The hex css value for the added background color does not apply.

[Choi-Jinwook]

Hello, I'm trying to make todoList that user can add todo.
Todo has 'value: string' and 'background: string'.

I set bg-[${item.background}] to apply custom background color and user enter background with ColorPicker only hex value.
Then, add it on the className={ ...rest ${background}}. It does not work.
If user enter '#aabbcc', className applied well, but in devtools 'styles', unable to load related value.
After user input, I change my code className={ ...rest ${background} bg-[#aabbcc]}, tailwind loads background color #aabbcc and it applied well in 'styles'. bg-[color]-[weight] format was same.
I think tailwind loads all attributes that is needed at first render. I set <div style={{ backgroundColor: background }} /> for temporary measure. How can I do this work using only tailwind?
Here's a video to support my explanation.
https://github.com/tailwindlabs/tailwindcss/assets/79634156/91a7b352-2f5b-46e0-90a6-cf6d2539c889

[alex-krasikau]

Hello @Choi-Jinwook!

Tailwind doesn't support constructing classes using template strings. To include the class in the build, it needs to see a complete utility class string in the code. You can read more details here - https://tailwindcss.com/docs/content-configuration#dynamic-class-names.

To solve your issue, I would recommend using inline styles:

// ...
setTodoList(..., background: item.background, ...)
// ...
<div className={...} style={background} />
// ...

[Choi-Jinwook]

Thank you for your answer! :)

[Sundanpatyad]

Tailwind doesn’t pick up dynamically generated class names like bg-[${color}]. So, we can't construct class names dynamically.

To Fix:
Use inline styles for dynamic background colors while keeping Tailwind classes for everything else.

const bgColorStyle = card.color ? { backgroundColor: card.color } : {};

return (
  <div className="bg-white p-2 rounded-md">
    <div onClick={handleClick} className="cursor-pointer transform transition-all duration-300">
      <div
        style={bgColorStyle}
        className="relative h-[250px] bg-opacity-60 rounded-lg shadow-md overflow-hidden"
      >
        {/* Content */}
      </div>
    </div>
  </div>
);

Dynamic styles: style={{ backgroundColor: card.color }} applies any valid CSS color (red, #ff0000, rgb(255,0,0), etc.).
Tailwind compatibility: Tailwind handles the rest of the styling as usual.

Avoid constructing Tailwind class names dynamically. Use inline styles when you need dynamic properties like colors.