Tailwind active style not displaying when element is also hovered

Question

I am working with TailwindCSS and am making a simple button that I want to have a shadow when hovered, then scale down when focused or active. The hover style works, but the active style does not. However it does work when I click it and then move the mouse off the button.

Button:

<router-link :to="{name: 'createEvent'}" tag="button" class="w-1/6 mx-auto rounded-full font-semibold py-2 px-4 border border-white rounded text-blue-400 bg-white hover:shadow-lg focus:bounce-sm hover:translate-t-2px transition-fast">
   Get Started
</router-link>

CSS:

/*scale*/
@variants responsive, hover, focus, active {
    .bounce-sm {
       transform: scale(0.95);
    }
}

Screenshots:

Hover works

Focus does not work when hover is also on

But focus works when hover is not on

Could someone explain to me why this is and how I can fix it? Thanks!

Answer 1

You need to add Pseudo-Class Variant for boxShadow to your tailwind.js file in variants object.

It would look like this:

variants: {
   boxShadow: ['responsive', 'hover', 'focus'],  
},

This will allow you to tweak boxShadow based on responsive classes, hover or focus.

I hope it helps.

Resources: https://tailwindcss.com/docs/pseudo-class-variants/#app