Tailwind CSS 4.0: La Révolution

Tailwind CSS 4.0 représente une réécriture complète avec des performances exceptionnelles.

Nouveau Moteur Oxide

Écrit en Rust pour une vitesse maximale :

• 10x plus rapide que v3
• Builds instantanés
• Hot reload ultra-rapide

CSS Variables Natives

Code
@theme {
  --color-primary: oklch(0.7 0.15 200);
  --spacing-lg: 2rem;
}

Code
<div class="bg-primary p-lg">
  Styling moderne
</div>

Container Queries Natifs

Code
<div class="@container">
  <div class="@lg:flex @lg:gap-4">
    <!-- Responsive au conteneur -->
  </div>
</div>

Nouvelles Utilities

3D Transforms

Code
<div class="rotate-x-45 perspective-500">
  Effet 3D
</div>

Gradients Améliorés

Code
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 
            bg-gradient-conic from-red-500">
  Dégradés avancés
</div>

Migration

Code
npx @tailwindcss/upgrade

Conclusion

Tailwind CSS 4.0 redéfinit le utility-first CSS avec puissance et élégance.