Nouveautés et Améliorations de Tailwind CSS v4

Tailwind CSS a lancé sa version 4.0, apportant une série de nouveautés et d'améliorations significatives pour les développeurs front-end. Voici un aperçu des principales fonctionnalités et améliorations de cette nouvelle version.

Nouveau moteur haute performance

Les builds complètes sont jusqu'à 5 fois plus rapides, et les builds incrémentielles sont plus de 100 fois plus rapides.

Simplicité d'installation

Moins de dépendances, zéro configuration, et juste une ligne de code dans votre fichier CSS.

Installer Tailwind CSS
```
npm i tailwindcss @tailwindcss/postcss;
```

Ajouter le plugin PostCSS

export default {
  plugins: ["@tailwindcss/postcss"],
};

Importer Tailwind dans votre CSS
```
@import "tailwindcss";
```

Configuration CSS-first

Avec Tailwind CSS v4, il n'est plus nécessaire de créer un fichier tailwind.config.js. La configuration peut désormais être gérée directement dans un fichier CSS, simplifiant ainsi le processus de configuration

/* Exemple de configuration CSS-First */
@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

Détection Automatique des Sources

La nouvelle version détecte automatiquement les sources de contenu, éliminant ainsi la nécessité de les spécifier manuellement dans la configuration

// Ancienne méthode
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
};

// Nouvelle méthode
// Plus besoin de spécifier les sources manuellement

Nouvelle Palette de Couleurs en OKLCH

Les couleurs par défaut sont désormais définies en OKLCH, offrant des couleurs plus vives et intéressantes1.

/* Exemple de palette de couleurs OKLCH */
@theme {
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
}

Prise en charge des requêtes de conteneur

Plus besoin du plugin : @tailwindcss/container-queries

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

Requêtes de conteneur max-width à l’aide de la nouvelle variante : @max-*

<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

Nouveaux utilitaires 3D

Transformez les éléments dans l'espace 3D directement dans votre HTML.

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>

La version v4.0.0 de Tailwind CSS est désormais disponible sur GitHub. Vous pouvez consulter l'annonce détaillant toutes les nouveautés et améliorations de cette version.

La documentation a été actualisée pour inclure les informations pertinentes à la v4, ainsi qu'un guide de mise à niveau pour faciliter la transition de la v3 à la v4.

Pour commencer un nouveau projet, vous pouvez suivre les instructions de démarrage dans la documentation.

Le guide de mise à niveau inclut un outil pratique qui simplifie le processus, prenant en charge des tâches telles que la migration de votre fichier de configuration vers CSS et la mise à jour des dépendances.

Nouveautés et Améliorations de Tailwind CSS v4

Table des matières