Tailwind css group hover animation not working

Question

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>

Answer 1

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>