Lo que estoy tratando de lograr es que tengo una lista que recibo de una llamada API donde tengo el color en código hexadecimal, por ejemplo, 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> ); })}lo que me preocupa es
<div className={`bg-[${item.color}] rounded-full px-2`}> <span className="self-center ">{item.description}</span> </div>El color de fondo no parece funcionar para mí, lo que recibo es el código hexadecimal, por lo que el color es #color, ¿hay alguna forma de escribirlo mejor?
Puede personalizar los colores en tailwind.config.js Aquí están las guías para ello: https://tailwindcss.com/docs/customizing-colors#app
o también puede usar la notación de valor arbitrario de viento de cola para generar una clase para el color que desea