在 tailwind css 中动态设置悬停值

Question

我想根据顺风的类别名称设置不同的文本颜色悬停。 我设置了一个配置，每个颜色代码都引用这样的类别：

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",
    },

并在我的组件中像这样使用它：

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>

但事实证明它不起作用。当我查看开发工具 ${category.attributes.slug} 时，它实际上被替换为类别的名称和我在配置中给出的名称

Answer 1

您可以尝试在 tailwind.config.js 中配置文本颜色的悬停效果吗

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