tailwindcss-animate
Para añadir animaciones de entrada y salida a tus componentes usando clases de utilidad de Tailwind, sin escribir CSS.
Plugin de Tailwind CSS para crear animaciones de entrada y salida con clases de utilidad.
Notas y contexto
Qué es
tailwindcss-animate es un plugin de Tailwind CSS creado por Jamie Kyle (jamiebuilds) que añade un conjunto de clases de utilidad para animar elementos. Está escrito en JavaScript, se integra mediante el sistema de plugins de Tailwind y se distribuye bajo licencia MIT. Es la dependencia de animaciones que usaban por defecto proyectos como shadcn/ui en sus versiones basadas en Tailwind v3.
Para qué sirve
- Aplicar animaciones de entrada (
animate-in) y salida (animate-out) a cualquier elemento con clases. - Controlar la transición con utilidades de duración, retardo, dirección, número de iteraciones y modo de relleno.
- Componer efectos como aparición, zoom, giro, escalado y deslizamiento desde cualquier borde.
- Respetar las preferencias de movimiento del usuario combinándolo con las variantes
motion-safeymotion-reduce.
Cuándo usarlo
Es ideal en proyectos con Tailwind CSS v3 donde quieres animaciones de aparición/desaparición declarativas sin escribir keyframes a mano, especialmente al usar componentes de Radix o shadcn/ui. Si tu proyecto está en Tailwind CSS v4, considera alternativas pensadas para la arquitectura CSS-first como tw-animate-css.
Ejemplo
Instalación y configuración del plugin:
npm install -D tailwindcss-animate// tailwind.config.js
module.exports = {
plugins: [require('tailwindcss-animate')],
};Uso en el marcado para animar la entrada de un elemento:
<div class="animate-in fade-in zoom-in slide-in-from-top-4 duration-300">Contenido que aparece con animación</div>Puntos clave
- Animaciones de entrada y salida combinables: fade, zoom, spin, slide desde cualquier dirección.
- Utilidades para ajustar duración, retardo, dirección, iteraciones, estado de reproducción y fill mode.
- Soporte de accesibilidad mediante las variantes de movimiento reducido de Tailwind.
- Sin dependencias en tiempo de ejecución: todo se resuelve en CSS generado en el build.
Ten en cuenta
El plugin depende del sistema de plugins JavaScript de Tailwind v3 y no es compatible de forma nativa con Tailwind CSS v4, que adopta un enfoque CSS-first. Para v4 la comunidad y proyectos como shadcn/ui recomiendan tw-animate-css como sustituto. El repositorio no está archivado, pero su actividad es baja, asà que evalúa el nivel de mantenimiento antes de adoptarlo en proyectos nuevos sobre versiones recientes de Tailwind.