Soy un novato en Tailwind CSS. La animación de desplazamiento no funciona en este caso. Cuando alguien se desplaza sobre el grupo, quiero que el fondo esté animado, sin embargo, eso no sucede; en su lugar, siempre se muestra el color de fondo.
<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>Para que su animación funcione, debe cerrar el div y poner algo en él ;-) Por ejemplo, como este, usando su fragmento de código, en este caso. Más información sobre group-hover aquí
<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>