Tailwind 按钮 - 渐变悬停黑暗模式不起作用？

Question

我试图在带有 tailwind 的 nextjs 项目中使用 globals.css 将这些属性应用到按钮，但我无法让 dark:hover 属性起作用。

.coloredButton {
    @apply bg-gradient-to-tr 
    from-cyan-500 
    to-blue-700 
    text-black 
    hover:bg-gradient-to-bl 
    hover:from-green-400 
    hover:to-teal-500 
    hover:text-white 
    focus:outline-none 
    focus:ring-4 
    focus:ring-transparent 
    dark:bg-gradient-to-tr 
    dark:from-green-400
    dark:to-teal-500 
    dark:text-white 
    dark:hover:bg-gradient-to-bl
    dark:hover:from-cyan-500 
    dark:hover:to-green-400 
    dark:hover:text-black 
    dark:focus:ring-transparent;
  }

我期望按钮是渐变的，并在正常模式下悬停，然后当我切换到深色模式时，渐变和悬停将翻转为其他颜色。 到目前为止，正常、正常悬停和深色模式渐变都按预期工作。然而，深色模式悬停则不然。 我是否做错了什么，或者他们只是不应该这样工作？

Answer 1

我已经在本地尝试了你的代码，它按照你想要的方式工作，所以我认为问题在于你切换模式的方式，有关更多详细信息，你可以在这里查看：在下一个js中启用浅色/深色模式切换