Can't override Linear Gradient in Tailwind?

Question

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?

Answer 1

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>