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-20consulte esto: https://tailwindcss.com/docs/transition-property#app