CODEWITHSUNDEEP
htmlcssreactjstailwind-css
Joni
Joni

Reputation: 91

Can't override Linear Gradient in Tailwind?

Just jumped into Tailwind, all was great until this happened - I set my button to have a linear background gradient but also set a :hover to change its background, like this:

className="w-1/4 h-2/3 bg-gradient-to-b from-indigo-50 to-indigo-200 self-center
         rounded-lg text-indigo-800 text-4xl font-bold focus:outline-none hover:bg-white">

Issue is it seems the hover can't override the gradient, I searched and variants seemed to have been the solution but I add the variants like this and it still doesn't work:

variants: {
    extend: {      
      backgroundImage: ['hover', 'focus'],
    },
  },

Do I need to do something else after I declare the variants?

Upvotes: 3

Views: 5527

Answers (2)

SamRJ
SamRJ

Reputation: 1

Use

hover:bg-none

It's because bg-gradient adds background image property which is different than background color.

Upvotes: 0

Digvijay
Digvijay

Reputation: 8947

bg-gradient uses background-image not background-color. I suggest using from and to on hover state to white hover:from-white hover:to-white. See a working demo.

<button class="w-1/4 h-2/3 bg-gradient-to-b from-indigo-50 to-indigo-200 self-center rounded-lg text-indigo-800 text-4xl font-bold focus:outline-none hover:from-white hover:to-white">
  Button
</button>

Upvotes: 6

Related Questions