I am trying to customize the text color on hover based on different category names using tailwind CSS. In my configuration, I have assigned a specific color code for each 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 then using it in my component like this :
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>
However, I have encountered an issue as it seems that the styling is not being applied. Upon inspecting with devtools, I can see that ${category.attributes.slug} is indeed being replaced by the correct category name defined in the config.