Estoy tratando de crear un efecto de transición con TailwindCSS y no he encontrado una versión actualizada con los últimos paquetes.
aquí está mi código
<div id="fadeInElement" className={visible ? " w-2/3 px-5 transition-height duration-500 ease-in-out h-full" : " hidden h-0"} > McClintock, a Latin professor at Hampden-Sydney College in..... </div>
Agregué la propiedad de altura a mi archivo de configuración tailwindcss para permitirme usar la propiedad de altura, pero todavía no parece crear la animación. Solo muestra y oculta.
Agregue las siguientes líneas a su archivo tailwind.config.js y reconstruya sus archivos estáticos CSS:
theme: { extend: { transitionProperty: { 'height': 'height' } } }
transition-height duration-500 ease-in-out
variants: { height: ['responsive', 'hover', 'focus'] }
si ahora usa las siguientes clases en cualquier div, la animación debería funcionar sin problemas:
bg-green-500 transition-height duration-500 ease-in-out h-8 hover:h-20
consulte esto: https://tailwindcss.com/docs/transition-property#app