estoy realizando un componente usando react, vite y tailwind css, en este componente realizo una consulta a la api de github, la respuesta de esta consulta contiene un color entre otros atributos, ese color trato de asignarlo al componente de tal forma que tome como borde y color de texto ese color, sin embargo al momento de cargar el componente tailwind no toma el color, lo extraño es que si lo ingreso quemado si funciona, mi componente:
import { LoadingIcon, useLabels } from "../../../index"
export const LabelPicker = () => {
const labelsQuery = useLabels()
if (labelsQuery.isLoading) {
return <LoadingIcon />
}
return (
<>
{
labelsQuery.data?.map(label => (
<span key={label.id}
className={`m-1 inline-block break-words border-[1px] border-solid border-[#${label.color}] rounded-2xl px-2 py-1 bg-transparent text-[#${label.color}] cursor-pointer text-center hover:bg-white/5`}>
{label.name}
</span >
))
}
</>
)
}
Al inspeccionar el codigo en mi navegador veo que en la clase del componente se carga debidamente el codigo del color por ejemplo border-[#${label.color}] queda como border-[#FFF], mas sin embargo no funciona, a menos que lo ingrese directmente en el codigo.
comparto tambien mi postcss.config.js y mi tailwind.config.js: postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}",],
theme: {
extend: {},
},
plugins: [],
}