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?

• javascript
• html
• css

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

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