Dynamic bg color is not working has I accepted .

[IntuzParthD]

Here I am attaching the code
const haha = () => {
const color = ["#2c1057","#4287f5","#fa0f0f"]
return (

{color.map((ele) => <div className={border w-10 h-10 bg-[${ele}]}>

)}

)
}

Here, Has I render the component the bg-[...] color render's a empty square but i suppose to get a colour in it .

Here I am attaching a snapshot of inspect element.

[ghost]

yes, I am also facing this issue

[wongjn]

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

<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>

[IntuzParthD]

Ok I got it , thanks for your Answer

[hamirmahal]

Can you mark that response as the answer?

[IntuzParthD]

After reading the tailwind documentation ,
I founded one of the way by which we can use the classes dynamically.
For example let colour be green, red, yellow, purple and we want to use it like className =bg-${color}-500.
while writing this directly we will not see any dynamic colour change in ui . So, to successfully use it we should write somewhere in the code for initialising the colours for example

...
//some where in the code
let colours = "bg-green-500 bg-red-500 bg-yellow-500 bg-purple-500"

//And now we can use this colour dynamically in the code, We can see the reflect in ui too.
//Here color can be green, red,yellow,purple
... className=bg-${color}-500 ...

[hydra1197]

How to fix this issue when the color is returned from API?

[IntuzParthD]

hello hydra1197,
If your rendering color value is coming directly from API you should first store it in a variable an later use the variable where required
For Example:-
The API response is like data:{bgColor:"#63B967",....}
first create a const in your file to save the color

const backgroundColor ={bg-${data.bgColor}}

later use the const in the className like

className={backgroundColor}

it will work.

[hydra1197]

It's not working on my end.

[hydra1197]

Here is my code:

import { SectionStoryblok } from '@/types/storyblok';
import classNames from 'classnames';

type Props = {
  blok: SectionStoryblok;
};

export default function Section({ blok }: Props) {
  const backgroundColorClass = `bg-[${blok.background_color}]`;

  return (
    <div
      className={classNames(
        'max-w-[1312px] mx-auto p-4 md:p-8',
        backgroundColorClass,
      )}
    >
      Content
    </div>
  );
}

[IntuzParthD]

I think there is an issue with the rendering, so you need to first render it statically in your page while the page is rendering like

You can ask the API provider to get the list of Colors from which he/she will send the color
so render the colors first in a string later you can use it dynamically, I think there is no other way than this

[hydra1197]

The simplest way is to use the style attribute ;)

[MehrabVosough]

in tailwind you cant use dynamic classes however you can use some dynamic color name like this:
const colorPalette = ["red","blue","green"] and use in tailwind class like this:
classname={bg-[colorPalette[0]]-500}

but in another way you can use style attribute for dynamic styles like this:
<div style={{ backgroundColor: colorPalette[index]}}></div>