What I'm trying to achieve is I have a list that I receive from an API call where I have the color in hexcode, for example, color: #00FF00
{stages.map((item) => {
return (
<tr className="bg-white">
<td className="flex px-3 justify-evenly ">
<span className="mr-auto">{item.id}</span>
<span className=" pr-5">{item.name}</span>
</td>
<td>
<div className="flex justify-center items-center">
<span className=" ">{item.id}</span>
</div>
</td>
<td className="flex justify-center items-center p-3">
<div className={`bg-[${item.color}] rounded-full px-2`}>
<span className="self-center ">{item.description}</span>
</div>
</td>
<td>
<div className="flex justify-center items-center">
<span className=" ">--</span>
</div>
</td>
</tr>
);
})}
the bit I'm concerned about is
<div className={`bg-[${item.color}] rounded-full px-2`}>
<span className="self-center ">{item.description}</span>
</div>
background-color doesn't seem to be working for me, what I'm receiving is the hex code so the color is #color, is there any way to write it better?
What I'm trying to achieve is I have a list that I receive from an API call where I have the color in hexcode, for example, color: #00FF00
{stages.map((item) => {
return (
<tr className="bg-white">
<td className="flex px-3 justify-evenly ">
<span className="mr-auto">{item.id}</span>
<span className=" pr-5">{item.name}</span>
</td>
<td>
<div className="flex justify-center items-center">
<span className=" ">{item.id}</span>
</div>
</td>
<td className="flex justify-center items-center p-3">
<div className={`bg-[${item.color}] rounded-full px-2`}>
<span className="self-center ">{item.description}</span>
</div>
</td>
<td>
<div className="flex justify-center items-center">
<span className=" ">--</span>
</div>
</td>
</tr>
);
})}
the bit I'm concerned about is
<div className={`bg-[${item.color}] rounded-full px-2`}>
<span className="self-center ">{item.description}</span>
</div>
background-color doesn't seem to be working for me, what I'm receiving is the hex code so the color is #color, is there any way to write it better?
Share Improve this question edited Mar 31, 2022 at 5:36 Raju Ahmed 1,2785 gold badges15 silver badges24 bronze badges asked Mar 31, 2022 at 3:40 Mohamed NabilMohamed Nabil 8056 gold badges16 silver badges29 bronze badges 2- I think inline styles is a better way to achieve this. – Servesh Chaturvedi Commented Mar 31, 2022 at 3:43
- In Tailwind you won't be able to set colors dynamically, more details - stackoverflow./a/76535534/6795703 – EvgenOrel Commented Mar 11 at 7:53
2 Answers
Reset to default 2You can customize colors in tailwind.config.js Here are the guides for it: https://tailwindcss./docs/customizing-colors#app
or, you can also use tailwind arbitary value notation to generate class for the color you want
Try this
<div className="bg-[#EBE9E1]"> </div>