Keyframes Config

Définition

Animations personnalisées utilisables via animate-*. En v4 elles se déclarent dans @theme : une variable --animate-<nom> crée l'utilitaire, et les @keyframes vivent dans le même bloc.

Analogie

Écrire le script d'une scène de film, puis dire a l'acteur de la jouer avec animate-*.

Exemple de code

@import "tailwindcss";

@theme {
  --animate-fade-in: fade-in 0.5s ease-in-out;

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
/* HTML : <div class="animate-fade-in"> */

Cas d'usage

Créer des animations d'entrée/sortie custom pour les modals, toasts, et notifications.

Termes liés

Sources

• tailwindcss.com/blog/tailwindcss-v4
• tailwindcss.com/docs/theme