In my nextjs project with Tailwind CSS, I am encountering an issue while trying to apply specific properties to a button using globals.css. The problem lies with the dark:hover properties not working as expected.
.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 had envisioned the button to display a gradient and change colors on hover in light mode, then transition to different colors when switched to dark mode. While the normal state, normal hover, and dark mode gradients are working correctly, the dark mode hover does not act as intended. Am I making a mistake in my implementation or is this behavior not supported?