CODEWITHSUNDEEP
javascriptreactjstailwind-csstailwind-in-js
Sazzad Hossain
Sazzad Hossain

Reputation: 141

Tailwind css group hover animation not working

I'm a newbie to tailwind css. Hover animation doesn't work in this case. When someone hovers over the group, I want the background to be animated, however that isn't happening; instead, the background color is always displayed.

<li className=" text-gray  active:text-red group">
  <a href={`${href}`}>
    {name}
  </a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out" />
</li>

Upvotes: 1

Views: 9475

Answers (3)

Ran Tab
Ran Tab

Reputation: 31

you need to add it to your variant on tailwind.config.js file. Try this:

variants: {
    extend: {
      scale: ["group-hover"]
    },
  },

Upvotes: 0

Impano Emma
Impano Emma

Reputation: 51

You need to add group to the parent div for the group-hover to work in tailwind css.

<li className="group text-gray  active:text-red group">
  <a href={`${href}`}>
    {name}
  </a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out" />
</li>

Upvotes: 2

MarioG8
MarioG8

Reputation: 5951

In order for your animation to work, you have to close the div and put something into it ;-) For example like this, using your code snippet, in this case. More about group-hover here

<li className="text-gray active:text-red group">
  <a href={`${href}`}>{name}</a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
    It works!
  </div>
</li>

Upvotes: 0

Related Questions