Ajouter des animations avec les plugins Tailwind CSS

Vous avez construit une interface Tailwind propre, mais elle semble statique. Ajouter du mouvement devrait être simple—jusqu’à ce que vous vous retrouviez face à un tailwind.config.js vide, vous demandant si vous avez besoin d’un plugin, d’une keyframe ou de quelque chose d’entièrement différent. Voici une cartographie claire de vos options.

Ce que Tailwind vous offre nativement

Tailwind propose quatre utilitaires d’animation qui couvrent un nombre surprenant de cas d’usage réels :

• animate-spin — loaders et icônes en rotation
• animate-ping — badges de notification et effets radar
• animate-pulse — écrans de chargement squelette
• animate-bounce — indicateurs de défilement et signaux d’attention

Pour un retour d’état simple—un spinner de chargement sur un bouton de soumission, un squelette pulsant pendant le chargement des données—ces animations Tailwind CSS intégrées sont souvent tout ce dont vous avez besoin. Associez-les aux utilitaires de transition (transition, duration-300, ease-in-out) pour les états de survol et de focus, et vous pouvez couvrir la plupart des micro-interactions sans toucher à un plugin. Vous pouvez explorer tous ces utilitaires dans la documentation officielle des animations Tailwind.

Quand les utilitaires intégrés suffisent : loaders, squelettes, badges et transitions de survol basiques.

Quand utiliser un plugin d’animation Tailwind

L’ensemble intégré a ses limites. Il n’inclut pas les animations d’entrée/sortie, les glissements directionnels, les retournements ou les révélations au défilement. C’est là que les plugins d’animation Tailwind trouvent leur place.

tailwindcss-animate

tailwindcss-animate ajoute des utilitaires d’entrée et de sortie composables :

<!-- Fondu et zoom à l'apparition -->
<div class="animate-in fade-in zoom-in duration-300">...</div>

<!-- Glissement vers le haut à la fermeture -->
<div class="animate-out slide-out-to-top fade-out duration-200">...</div>

Il expose également des contrôles granulaires—delay-150, repeat-infinite, fill-mode-forwards, direction-alternate—qui vous permettent d’ajuster les animations sans écrire de CSS personnalisé.

Cependant, le plugin n’a pas connu de nouvelle version depuis 2023, donc la compatibilité avec les versions plus récentes de Tailwind peut varier selon votre configuration. Certaines stacks modernes Tailwind v4 utilisent plutôt des packages d’animation plus récents conçus autour de l’architecture CSS-first du framework.

tailwind-animations

tailwind-animations adopte une approche différente : une large bibliothèque d’animations nommées (animate-fade-in, animate-shake, animate-heartbeat, animate-jelly, et bien d’autres).

<div class="animate-fade-in">
  Boîte en fondu
</div>

Le plugin prend également en charge les utilitaires d’animation basés sur le défilement en utilisant la propriété CSS animation-timeline.

<!-- Révélation au défilement avec CSS View Timeline -->
<div class="timeline-view animate-fade-in-up animate-range-gradual">...</div>

Ces animations pilotées par le défilement reposent sur des fonctionnalités de navigateur plus récentes telles que animation-timeline, donc la prise en charge par les navigateurs peut varier selon votre audience cible.

Tailwind CSS v4 et l’approche CSS-first

Si vous utilisez Tailwind CSS v4, la méthode recommandée pour ajouter des animations personnalisées est directement dans votre CSS en utilisant @theme :

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% { transform: rotate(-3deg) }
    50% { transform: rotate(3deg) }
  }
}

Cela rend animate-wiggle disponible comme classe utilitaire immédiatement—aucun plugin requis. Pour des animations personnalisées ponctuelles, c’est souvent plus propre que d’installer une dépendance.

Note de compatibilité : Certains plugins ont été conçus pour Tailwind v3 et peuvent ne pas prendre entièrement en charge l’architecture CSS-first de la v4. Vérifiez toujours le dépôt ou la documentation d’un plugin avant de l’ajouter à un projet v4.

N’oubliez pas l’accessibilité

Enveloppez toute animation non essentielle dans motion-safe: afin que les utilisateurs qui préfèrent un mouvement réduit ne soient pas affectés :

<svg class="motion-safe:animate-spin ...">...</svg>

La variante motion-reduce: de Tailwind fonctionne dans l’autre sens—appliquant des styles uniquement lorsque le mouvement réduit est préféré. Utilisez les deux pour offrir une expérience confortable à chaque utilisateur.

Choisir votre approche

Conclusion

Commencez par ce que Tailwind fournit déjà. Les quatre utilitaires d’animation intégrés et les classes de transition gèrent la plupart des micro-interactions quotidiennes. Lorsque vous avez besoin de séquences d’entrée/sortie, de glissements directionnels ou de révélations au défilement, un plugin comme tailwindcss-animate ou tailwind-animations peut s’intégrer proprement. Si vous êtes sur la v4, essayez de définir des tokens d’animation personnalisés en CSS avant de recourir à un package. Quel que soit le chemin que vous choisissez, n’oubliez pas de respecter la media query prefers-reduced-motion afin que chaque utilisateur bénéficie d’une expérience confortable.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.