Quiero establecer un color de texto diferente según el nombre de las categorías con viento de cola. Establecí una configuración con cada código de color que se refiere a una categoría como esta:
tailwind.config.js
theme: { extend: { } }, colors: { transparent: 'transparent', current: 'currentColor', "animation": "#A72608", "decor": "#E0AFA0", "illustrations": "#32936F", "developpement-visuel": "#C2FCF7", "realisations": "#FEEA00", "croquis": "#9F6BA0", "white": "#FFFFFF", },y usarlo así en mi componente:
barra lateral.js
<nav> <ul> {categories.map((category) => { return ( <li key={category.id} className="mb-4"> <Link href={`/category/${category.attributes.slug}`}> <a className={`hover:text-${category.attributes.slug} uppercase font-light text-sm`} >{category.attributes.name}</a> </Link> </li> ) })} </ul> </nav>pero resulta que no funciona. Cuando miro las devtools ${category.attributes.slug} reemplaza efectivamente el nombre de la categoría y el nombre que le di en mi configuración
¿Puedes intentar configurar el efecto de desplazamiento para el color del texto en tailwind.config.js
module.exports = { variants: { textColor: ['group-hover', 'hover'], } }