css Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

2

Answers


  1. 0

    Because the gradient color sets the background by default, to solve this issue, you can use the same gradient but with the desired color on hover, like below:

    <button className="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>

    This should solve the problem and ensure the gradient background changes correctly on hover.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search