Why the hover class is not working on tailwind?

I'm trying to style a button with tailwind on Next.js. I want the button background color to change on hover.

I'm trying to style a button doing something like this

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

But hover is not changing the background color.

Solution

Tailwind bg-gradient-* class sets a linear gradient (in this case) like the following CSS code

background-image: linear-gradient(to bottom right, #67e8f9, #3B82F6, #8B5CF6);

since hover:bg-slate-200 only affects the background color, the background-image is unaltered. you have to modify the background-image to get the desired result

override the background-image property by setting hover:bg-none first

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"> </script>
  </head>
  <body>

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

<! exactly reversing -->
    <button class="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:from-slate-200 hover:via-slate-200 hover:to-slate-200">
    Hire Me
    </button>
  </body>
</html>