Les nouveautés de Tailwind CSS v4

L'essentiel de cette nouvelle version permet de faciliter l'installation mais aussi la personnalisation de Tailwind CSS.

Des performances améliorées

Par exemple, on peut voir sur le site officiel de Tailwind CSS ce tableau qui permet de représenter l'énorme hausse des performances quand on travaille avec le framework CSS :

Une personnalisation simplifiée (css-first)

Avec les versions inférieures à Tailwind CSS 4 nous devons utiliser le fichier tailwind.config.js afin de personnaliser nos classes.

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
};

Désormais, c'est du passé !

Tailwind CSS 4 peut être géré sur votre feuille de style par défaut avec une seule importation.

@import "tailwindcss";

@theme {
  --font-display: "Roboto", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-primary-100: oklch(0.99 0 0);
  --color-primary-200: oklch(0.98 0.04 113.22);
  --color-primary-300: oklch(0.94 0.11 115.03);
  --color-primary-400: oklch(0.92 0.19 114.08);
  --color-primary-500: oklch(0.84 0.18 117.33);
  --color-primary-600: oklch(0.53 0.12 118.34);

  /* ... */
}

C'est plus simple. Tout est dans notre feuille de style (c'est pour ça qu'on parle ici d'un concept css-first).

Des fonctionnalités avancées

Tailwind CSS 4 ne se contente pas d'optimiser les performances mais vient prendre en charge les dernières nouveautés CSS supportées par les navigateurs.

Par exemple, la nouvelle propriété color-mix est désormais utilisable par les classes de Tailwind CSS :

@layer theme, base, components, utilities;

@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

On remarque aussi que Tailwind CSS v4 décompose maintenant ses classes utilisataires et ses composants par des règles très différentes :

• @layer utilities / @utility - pour définir une classe utilitaire ;
• @layer component - pour définr un composant (.btn par exemple) ;
• @variant - pour définir un variant ;
• @property - pour définir une variable.

Désormais il faudra donc utiliser ceci pour activer le mode sombre quand une classe dark existe sur un élément :

@custom-variant dark (&:where(.dark, .dark *));

Des nouvelles couleurs avec OKLCH

Tailwind CSS v4 utilise désormais une nouvelle approche pour gérer les couleurs de sa palette de couleur en utilisant OKLCH.

Bien que peu utilisé comparé à son alternative RGB, elle permet d'avoir une colorimétrie plus moderne / précise.

Une installation simplifiée

Tailwind CSS v4.0 est maintenant plus simple à installer : une seule ligne suffit pour charger les classes utilitaires dans notre feuille de style :

@import "tailwindcss";

Une détection des contenus automatisée

Maintenant, plus besoin de préciser les fichiers qui contiennent nos classes utilitaires Tailwind CSS.

Tout est fait pour nous !

Ces dossiers sont par exemple ignorés désormais s'ils sont ajoutés dans votre fichier .gitignore car Tailwind CSS v4 le lit automatiquement :

/node_modules
/coverage
/.next/
/build

Des améliorations sur les valeurs passées arbitrairement

Avec Tailwind CSS v4 nous pouvons désormais utiliser des classes à la volée :

<div class="grid grid-cols-15">
  <!-- ... -->
</div>

Ce code vient générer une grille de 15 colonnes alors que Tailwind CSS v4 ne dispose par défaut que d'une grille jusqu'à 12 colonnes. Nous aurions pu préciser grid-cols-300 que cela aurait généré une grille ayant 300 colonnes d'un seul coup.

L'intégration des container query

Les container query sont désormais supportées par Tailwind CSS v4 :

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Une transformation en 3D améliorée

Tailwind CSS v4.0 supporte désormais les classes qui permettent d'utiliser des transformations en trois dimensions.

Par exemple nous avons maintenant rotate-x-*, rotate-y-* et scale-z-*.

N'hésitez pas à aller voir la documentation pour bien utiliser cette nouvelle possibilité avec Tailwind CSS v4.0.

Conclusion

Bref ! Voici pour les nouveautés de Tailwind CSS v4 !

Envie de passer à la version 4 ? Une seule commande suffit :

npx @tailwindcss/upgrade@next

Envie de vous former ? Notre formation dédiée à Tailwind CSS 4 est déjà disponible pour vous accompagner et faire de vous un véritable expert en front-end.