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>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>