Tailwind Button - gradient hover dark mode not working?

Question

I am trying to apply these properties to a button using globals.css in a nextjs project with tailwind and I can't get the dark:hover properties to work.

.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;
  }

I was expecting the button to be of a gradient and hover in normal mode, then when I switch to dark mode the gradient and hover would flip to other colors. So far normal, normal hover and dark mode gradients work as expected. Dark mode hover however is not. Am I doing somethign wrong or are they just not meant to work like this?

Answer 1

I have tried your code in my local and it is working as you want, so i think issue is with the way you toggling mode, for more details you can check here: Enable Light/Dark mode toggle in next js