Next.js中Tailwind hover类不生效的问题求助

嘿，我之前也碰到过一模一样的问题！你的按钮hover样式不生效是有具体原因的，咱们一步步拆解清楚：

问题根源 #

你给按钮加的bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500是设置了背景渐变（对应CSS的background-image属性），而hover:bg-slate-200只是设置了背景颜色（对应CSS的background-color属性）。在CSS的渲染优先级里，background-image会覆盖在background-color之上，所以就算hover时颜色改了，渐变背景还在上面挡着，自然看不到变化。

解决方案 #

这里有两种简单的修复方法，选你顺手的就行：

方法1：hover时移除渐变背景，改用纯色

直接给hover状态加上bg-none类，把渐变的background-image清空，这样纯色背景就能正常显示了：

<button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-slate-200 hover:bg-none">
    Hire Me
</button>

方法2：hover时替换成纯色渐变

如果想保持用background-image的方式（比如兼容某些特殊场景），可以把hover的纯色改成从同一种颜色开始到结束的渐变：

<button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-gradient-to-br hover:from-slate-200 hover:to-slate-200">
    Hire Me
</button>

这样两种方法都能让hover效果正常生效啦～

备注：内容来源于stack exchange，提问作者Otavio Nishimura