1

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: [],
}
0

1 respuesta 1

1

Segun la documentacion:

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Si utiliza la interpolación de cadenas o concatena nombres de clases parciales, Tailwind no los encontrará y, por lo tanto, no generará el CSS correspondiente

envia la clase completa

ejemplo:

const colorBorder = 'border-red'

className={${colorBorder} }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.