dynamically set hover value in tailwind css

Question

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

Answer 1

Can you try to config hover effect for text color in tailwind.config.js

module.exports = {
   variants: {
        textColor: ['group-hover', 'hover'], 
   }
}