CODEWITHSUNDEEP
htmlcsslaraveltailwind-css
Toti Cuervo
Toti Cuervo

Reputation: 275

Tailwind active style not displaying when element is also hovered

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 enter image description here

But focus works when hover is not on enter image description here

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

Upvotes: 4

Views: 20150

Answers (1)

Ben
Ben

Reputation: 2245

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

Upvotes: 9

Related Questions