最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to add background color using tailwind when i have the hex code for the color? - Stack Overflow

programmeradmin8浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 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>
发布评论

评论列表(0)

  1. 暂无评论