Ring Color on Hover using TailwindCSS

user_11690533 0
Viewed 3698

I'm using TailwindCSS for a project, and I'm stuck on a weird interraction.

The result I'm looking for is to have a ring outside a button when I hover it, but using the ring classes from Tailwind, I can't get the ring on hover, yet it work using focus.

Before filling a bug report, I thought maybe one you guys might see a mistake on my part before ?

I made the smallest possible codepen to reproduce my issue : https://codepen.io/Pymous/pen/bGBQKPO The CodePen contains this simple code :

<button class="mt-4 ml-4 px-8 py-2 text-white bg-yellow-500 ring-offset-2 ring-transparent ring-2 focus:ring-red-500 hover:ring-red-500">
  Connexion
</button>

Thanks !

tailwind-css css
1 Answers

Hover is not enabled by default according to tailwindcss's documenation.

By default, only responsive, focus-within and focus variants are generated for ring width utilities.

You can control which variants are generated for the ring width utilities by modifying the ringWidth property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and active variants:


  // tailwind.config.js
     module.exports = {
       variants: {
         extend: {
           // ...
   
          ringWidth: ['hover', 'active'],
         }
       }
     }

https://tailwindcss.com

user_82921780
Related