Tailwind Animations
Para añadir animaciones a una interfaz con Tailwind usando clases de utilidad, sin escribir keyframes.
Plugin de Tailwind CSS con más de 70 animaciones listas para usar como clases de utilidad.
Notas y contexto
Qué es
Tailwind Animations es un plugin open source para Tailwind CSS creado por midudev que aporta más de 70 animaciones listas para usar (fade, zoom, slide, bounce, flip…). En lugar de escribir @keyframes y declaraciones de animación a mano, basta con añadir clases de utilidad como animate-fade-in o animate-slide-in-bottom. Tiene web oficial con un previsualizador interactivo y se distribuye bajo licencia MIT.
Para qué sirve
- Añadir animaciones de entrada y salida a elementos sin escribir CSS personalizado.
- Ajustar duración, retardo y easing de cada animación con modificadores.
- Crear animaciones ligadas al scroll o a la visibilidad del elemento en el viewport.
- Animar el elemento
<dialog>con transiciones de entrada/salida y direcciones.
Cuándo usarlo
Encaja en proyectos que ya usan Tailwind CSS y quieren animaciones rápidas y consistentes sin montar configuración propia. Da soporte nativo a Tailwind v4; para Tailwind v3 hay que usar la última versión compatible (@midudev/tailwind-animations@0.2.0). Si necesitas animaciones complejas orquestadas o basadas en estado, una librería como Motion (antes Framer Motion) o GSAP puede ser más adecuada.
Ejemplo
Instalación y registro del plugin con Tailwind v4:
npm install tailwind-animations@import 'tailwindcss';
@import 'tailwind-animations';Uso en el HTML con modificadores de retardo y duración:
<div class="animate-fade-in animate-delay-300 animate-duration-slow">Hola</div>Puntos clave
- Más de 70 animaciones predefinidas accesibles como clases de utilidad.
- Modificadores para personalizar duración, retardo y easing sin configuración.
- Soporte de animaciones por scroll y view timelines (
timeline-view,timeline-scroll). - Soporte nativo de Tailwind CSS v4 y previsualizador interactivo en la web oficial.
Ten en cuenta
El nombre del paquete cambió: antes se publicaba como @midudev/tailwind-animations y ahora es tailwind-animations. El soporte de Tailwind v3 queda congelado en la versión 0.2.0, así que para proyectos antiguos conviene fijar esa versión. Las animaciones por scroll dependen de las View/Scroll Timelines de CSS, cuyo soporte en navegadores puede variar; comprueba la compatibilidad si la animación es crítica.