Tengo un componente que cambia de clase cada renderizado para animar ese componente dependiendo de su estado con Tailwind:

 import { useState, useEffect, useRef } from 'react' export default function LeftToolbox() { const [isOut, setIsOut] = useState(true) const [classNames, setClassNames] = useState('hover:animate-slideIn h-full w-14 position absolute bg-red-800' + ' left-0 z-40') useEffect( () => { isOut && setClassNames('hover:animate-slideIn h-full w-14 position absolute bg-red-800 left-0 z-40') !isOut && setClassNames('hover:animate-slideOut h-full w-14 position absolute bg-red-800 left-0 z-40') }, [isOut]) return ( <div onMouseEnter={() => setIsOut(false)} onMouseLeave={() => setIsOut(true)} className={classNames}></div> ) }

Las clases del componente cambian apropiadamente, de acuerdo con onMouseEnter y onMouseLeave , pero la animación en sí misma no funciona.