Migration Tailwind v3 → v4

Définition

Points de rupture documentés dans le guide officiel : @tailwind base/components/utilities remplacés par @import "tailwindcss" ; config JS chargée explicitement via @config ; utilitaires renommés (shadow-sm → shadow-xs, shadow → shadow-sm, ring → ring-3, outline-none → outline-hidden) ; bordure par défaut currentColor ; préfixe en tw:flex ; important en flex! ; variables en bg-(--var) ; theme() déprécié au profit de var(--color-…). L'outil npx @tailwindcss/upgrade automatise l'essentiel. Contexte : Tailwind Labs a rejoint Shopify le 9 septembre 2026.

Analogie

Déménager : mêmes meubles, nouvelle adresse et quelques cartons à réétiqueter.

Exemple de code

/* v3 */
@tailwind base; @tailwind components; @tailwind utilities;
.card { box-shadow: theme(boxShadow.md); }

/* v4 */
@import "tailwindcss";
.card { box-shadow: var(--shadow-md); }

/* HTML : shadow → shadow-sm, !flex → flex!, tw-flex → tw:flex,
   bg-[--brand] → bg-(--brand), focus:ring → focus:ring-3 */

Cas d'usage

Préparer la montée de version d'un projet v3 : lancer l'upgrade tool sur une branche, relire les classes renommées, vérifier les bordures.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/upgrade-guide
• tailwindcss.com/blog