Il y a plusieurs mois (au moment de la rédaction de cet article), Tailwind CSS a rendu open source son travail sur Tailwind CSS v4.0. (Vous pouvez le trouver sur GitHub ici).

Récemment, Tailwind a annoncé une bêta publique pour Tailwind CSS 4, et dans cet article, je couvrirai les points forts de la nouvelle version. Alors commençons !

Modifications de la structure générale

Tailwind a subi une refonte de son moteur qui améliore considérablement les performances. Les builds complètes sont jusqu'à 5x plus rapides, les builds incrémentielles jusqu'à 100x (vous avez bien lu) plus rapidement.

Tailwind v4 dispose également d'une chaîne d'outils unifiée. Vous souvenez-vous d'avoir dû installer le préfixe automatique et le postcss dans tous vos projets Tailwind ? Vous n’aurez plus à le faire !

En adoptant une approche intéressante de la configuration, Tailwind passe des fichiers de configuration JS à la configuration CSS. Cela signifie que vous configurerez les plugins, les thèmes et autres comportements directement dans votre CSS.

Tailwind bénéficie également du support pour les dernières fonctionnalités CSS.

CSS a un nouveau logo (et de nouvelles fonctionnalités) ! ?

Meilleurs codes ・ 23 novembre

#css #webdev #programmation #discuter

Maintenant, avec les changements généraux en cours, voyons ce que Tailwind ajoute spécifiquement !

Nouvelles fonctionnalités ?

Si vous souhaitez essayer Tailwind v4, consultez la documentation de démarrage pour la v4 (bêta).

Si vous souhaitez mettre à niveau facilement votre projet, exécutez simplement npx @tailwindcss/upgrade@next et Tailwind le fera pour vous. Soyez prudent ! Il peut y avoir des modifications importantes.

Couleurs

La palette de couleurs Tailwind v4 est basée sur oklch au lieu de RVB. Le système de couleurs RVB est un peu limitant en termes de cohérence sur les écrans et de dynamisme. Puisque le système de couleurs oklch est désormais largement pris en charge, Tailwind v4 va en profiter !

Requêtes de conteneur

Tailwind v4 prend désormais en charge les requêtes de conteneur par défaut. Si vous ne savez pas ce que sont les requêtes de conteneur, laissez-moi vous expliquer.

Vous connaissez des choses dans Tailwind comme md :, sm :, etc. qui vous permettent de personnaliser le CSS appliqué sur différentes tailles d'écran ?
Dans ces cas, les classes font référence à la taille d'une fenêtre. Avec les requêtes de conteneur, elles peuvent plutôt faire référence à la taille d'un conteneur.

Dans l'exemple ci-dessus, la grille aura 3 colonnes — non pas lorsque la fenêtre atteint la petite taille, mais lorsque le conteneur l'atteint. Comme vous pouvez l'imaginer, c'est très pratique dans les mises en page réactives.


  
  
  Dimensionnement du champ


le dimensionnement des champs n'est pas encore une fonctionnalité CSS universellement prise en charge, mais ce sera génial quand ce sera le cas ! Au lieu d'avoir besoin de JS pour créer des zones de texte à redimensionnement automatique, vous pouvez utiliser uniquement CSS.

Et Tailwind v4 le prend en charge !

Essayez la démo sur le site Web de Tailwind.

Vous pouvez maintenant simplement ajouter la classe field-sizing-content à votre zone de texte pour l'utiliser.

  
  
  Mises à jour descendantes


Tailwind stable (vous ne le savez peut-être pas) a une variante * qui vous permet de cibler les enfants directs d'un élément avec une classe. Par exemple:







La nouvelle variante ** de Tailwind v4 ciblera tous les descendants :








  
  
  Incruster des ombres (et des anneaux)


Il sera également désormais facile de créer des ombres et des anneaux incrustés sur des éléments à l'aide des classes inset-shadow et inset-ring.













  
  
  Il y a bien plus encore !


Si vous souhaitez voir tous les nouveaux ajouts, rendez-vous sur https://tailwindcss.com/docs/v4-beta et consultez-les !

Cet article est un article de #discussion ! C'est pourquoi j'ai été bref ; Je veux savoir ce que vous pensez !

Je sais que beaucoup d'entre vous, ceux qui détestent Tailwind, auront probablement des commentaires à me faire ?

Il y a certainement de nouvelles fonctionnalités controversées et je souhaite avoir des avis ?

Résumé : laissez un commentaire !




Merci d'avoir lu !

Meilleurs codes