I want to set a different text color hover depending on categories name with tailwind. I set a config with each color code refering to a category like this :
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",
},
and using it like this in my component :
sidebar.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>
but it turns out that it doesn't work. When I look at the devtools ${category.attributes.slug} is effectively replace be the name of the category and the name I gave in my config
Can you try to config hover effect for text color in tailwind.config.js
module.exports = {
variants: {
textColor: ['group-hover', 'hover'],
}
}