L'annonce de la version 4.0 Alpha de Tailwind CSS par Adam Wathan, le créateur de Tailwindcss, est un game changer. Cette nouvelle version est une transformation profonde qui promet de changer notre manière de travailler avec le framework. Avec des améliorations significatives telles que le nouveau moteur Oxyde, une détection automatique du contenu améliorée, Tailwind CSS v4.0 Alpha se positionne encore plus comme un outil incontournable pour nous, les développeurs. Dans cet article, je ferai un passage rapide sur toutes les nouvelles fonctionnalités auxquelles vous pouvez vous attendre dans la v4.

Le Nouvel Engine Oxyde

Tailwind CSS v4.0 dévoile son nouveau compilateur Oxyde, annoncé il y a déjà quelques mois. Oxyde est enfin disponible dans la version 4 alpha. Adam Wathan annonce que le nouvel engin compile jusqu'à 10 fois plus vite que son prédécesseur. Il est complètement autonome, plus léger et ne dépend plus de plugins externes comme postcss.

Des Plugins Intégrés

Jusqu'à la dernière version stable de tailwindcss, on avait besoin de plusieurs dépendances pour lancer un projet. La version 4.0 vient avec ses propres outils intégrés. Elle est basée sur Lightning CSS. Cela nous évite l'installation de modules comme postcss-import ou autoprefixer. Vous pouvez donc utiliser @import ou encore l'encapsulation directement dans votre fichier css sans rien d'autre que Tailwindcss.

Support des nouvelles fonctionnalités de CSS

La nouvelle version alpha intègre les classes pour utiliser les container queries et le @layer que vous pouvez utiliser pour définir l'ordre d'application des styles. Il y a également de nouvelles classes comme color-mix-* pour modifier l'opacité de la couleur sur un élément. Avec cet ensemble, nous pouvons faire des compositions de classes utilitaires plus avancées pour créer des sites web plus dynamiques que jamais.

Compositions de variantes

C'est la nouveauté que j'aime le plus. La composition de variantes permet dorénavant de composer plusieurs sélecteurs pour obtenir un comportement unique. Par exemple, on peut réaliser des compositions comme group-has-focus:opacity-100 pour détecter directement qu'un élément au sein d'un groupe est en état de focus. Adam Wathan dit qu'il n'y a plus de limite à ce qu'on peut faire tant qu'on peut l'imaginer : group-not-has-peer-not-data-active:underline.

Personnellement, je trouve que cela ajoute une possibilité infinie à la créativité, surtout lorsqu'on utilisera du JavaScript.

<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
    <div class="group-has-focus:opacity-100">
      <!-- ... -->
    </div>
  </div>
</div>

Zéro configuration - Que du CSS

tailwind.config.js n'est plus une obligation. Tailwindcss évolue vers une version où l'on n'aura plus besoin de configurations. Il est maintenant possible de tout définir comme des variables css directement dans le fichier css principal en utilisant @theme{}.

En fonction de la manière dont vous avez intégré tailwindcss dans votre projet, Oxyde déterminera les fichiers que vous utilisez et générera le css de manière automatique. Voici la nouvelle façon de créer nos variables dans un fichier css en utilisant @theme{} :

@import 'tailwindcss';

@theme {
  --color-*: initial;

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

Vous pouvez explorer le thème par défaut ici.

Allons-y, voici votre section révisée pour plus de clarté et de précision, tout en conservant le style et les expressions originaux :

Essayer la nouvelle version

Pour tester la nouvelle version de Tailwind CSS, voici les étapes à suivre selon votre environnement de développement :

1. Pour les projets utilisant Vite

   Suivez ces étapes pour intégrer Tailwind CSS :

   Installez Tailwind CSS et le plugin Vite pour Tailwind CSS en utilisant npm :

   npm install tailwindcss@next @tailwindcss/vite@next
   

Ensuite, ajoutez le plugin Tailwind CSS à votre configuration Vite dans le fichier vite-config.{ts/js} :

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Pour terminer, ajoutez Tailwind CSS à votre fichier CSS principal :

@import 'tailwindcss';

2. Pour les projets utilisant PostCSS

   Procédez comme suit :

   Installez Tailwind CSS et le plugin PostCSS pour Tailwind CSS via npm :

   npm install tailwindcss@next @tailwindcss/postcss@next
   

   Ajoutez le plugin Tailwind CSS à votre configuration PostCSS dans le fichier postcss.config.js :

   module.exports = {
     plugins: {
       '@tailwindcss/postcss': {},
     },
   }
   

   Enfin, intégrez Tailwind CSS dans votre fichier CSS principal :

   @import 'tailwindcss';
   

Ce qui va changer

La nouvelle version apporte des changements significatifs, notamment la suppression de certaines classes utilitaires qui n'étaient plus documentées. Voici les classes que vous ne devriez plus utiliser dans vos projets :

• text-opacity-*
• flex-grow-*
• decoration-slice

Concernant les couleurs des bordures, elles étaient par défaut définies sur gray-200. Désormais, la couleur des bordures sera par défaut sur currentColor. Vous pouvez continuer d'utiliser notre génerateur de nuances et notre outils pour créer des dégradés de couleurs.

Les anneaux (rings) utilisés sur les inputs, auparavant de 3px par défaut, seront maintenant de 1px par défaut, également en currentColor.

Conclusion

Avec la version 4.0, Tailwind CSS ne se contente pas d'introduire des améliorations techniques; il repense l'expérience de développement front-end. Les nouvelles fonctionnalités et améliorations promettent de rendre la création de sites et d'applications web non seulement plus rapide, mais aussi plus intuitive. C'est un moment excitant pour faire partie de la communauté Tailwind CSS et de voir comment ces changements influenceront nos projets futurs.