Se préparer pour Tailwind v

Écrit par Oscar Jite-Orimiono✏️

Le mot « vent arrière » signifie littéralement le vent soufflant dans la même direction que la trajectoire d'un avion ou d'un bateau. Il aide un objet à voyager plus rapidement et à atteindre sa destination plus rapidement, garantissant ainsi rapidité et efficacité.

Tailwind CSS est un framework axé sur les utilitaires qui vous permet de « créer rapidement des sites Web modernes sans quitter votre code HTML ». Ce n'est pas la tasse de thé de tous les développeurs, mais Tailwind CSS a gagné en popularité depuis sa sortie en 2019.

Aujourd'hui, vous trouverez probablement Tailwind CSS répertorié aux côtés de noms établis comme Bootstrap et Bulma lorsque vous recherchez « Meilleurs frameworks CSS [insérer le numéro] ».

Cet article fournira un aperçu et une analyse approfondie de la prochaine version, Tailwind v4.0. Nous aborderons les stratégies de migration de projets existants et des exemples illustrant les nouvelles fonctionnalités de Tailwind v4.0. Nous le comparerons également avec des frameworks CSS similaires et explorerons les avantages et les limites de l'utilisation de ce framework.

Premiers pas avec Tailwind v4.0

Tailwind v4.0 est en développement depuis plusieurs mois et la première version bêta publique a été publiée en novembre 2024.

Pour des informations plus détaillées, vous pouvez consulter la documentation préliminaire, mais ce guide mettra en évidence certaines des nombreuses fonctionnalités nouvelles et intéressantes que les développeurs peuvent espérer dans Tailwind CSS v4.0

Nouveau moteur performant

L'équipe Tailwind a annoncé un nouveau moteur de performances, Tailwind Oxide, en mars 2024. Certains avantages incluent une chaîne d'outils unifiée et une configuration simplifiée pour accélérer le processus de construction.

Configuration CSS d'abord

Avec la version actuelle de Tailwind, le fichier tailwind.config.js vous permet de remplacer les jetons de conception par défaut de Tailwind. Il s'agit d'un centre de personnalisation dans lequel vous pouvez ajouter des classes et des thèmes d'utilitaires personnalisés, désactiver des plugins, etc.

Sa fonction la plus importante consiste à définir les sources de contenu de votre projet afin que Tailwind puisse rechercher les noms de classes d'utilitaires pertinents et produire le bon résultat.

Voici le code par défaut du fichier tailwind.config.js lors de la configuration d'un nouveau projet avec Tailwind v3 :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Directives supprimées

Après avoir configuré le fichier de configuration, l'étape suivante consistait à ajouter les directives Tailwind au fichier index.css.

Voici les directives de Tailwind v3 :

@tailwind base;
@tailwind components;
@tailwind utilities;

Dans Tailwind v4, vous n'avez pas besoin d'un fichier tailwind.config.js ni de directives @tailwind. Il vous suffira d'importer "tailwindcss" dans votre fichier CSS principal, et vous êtes prêt à partir :

@import "tailwindcss";

Cela réduit le nombre d'étapes lors de la mise en place d'un nouveau projet et le nombre de fichiers.

Vous pouvez toujours utiliser un fichier de configuration JS, par exemple, si vous avez déjà un projet v3 existant, en utilisant la nouvelle directive @config pour le charger dans votre fichier CSS :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Cependant, toutes les fonctionnalités, comme corePlugins, important et separator, ne seront probablement pas prises en charge dans la version complète v4.0. Certaines options, comme la liste sûre, peuvent revenir avec des changements de comportement.

Détection des sources

S'il y a des fichiers que vous ne souhaitez pas inclure, vous pouvez utiliser la fonction source() lors de l'importation de Tailwind pour limiter la détection automatique :

@tailwind base;
@tailwind components;
@tailwind utilities;

Pour les sources supplémentaires que Tailwind ne détecte pas par défaut, comme tout ce qui se trouve dans votre fichier .gitignore, vous pouvez les ajouter à l'aide de la directive @source :

@import "tailwindcss";

Vous pouvez également désactiver complètement la détection de source :

@import "tailwindcss";

@config "../../tailwind.config.js";

Désactiver le contrôle en amont

Vous pouvez importer les calques individuels spécifiques dont vous avez besoin pour votre projet et désactiver les styles de base de Tailwind :

@import "tailwindcss" source("../src");

Personnalisation des thèmes

La nouvelle approche CSS-first facilite l'ajout de styles personnalisés à votre projet Tailwind. Toute personnalisation sera ajoutée directement au fichier CSS principal au lieu d'un fichier de configuration JavaScript.

Si, par exemple, vous souhaitez configurer de nouvelles couleurs pour un thème personnalisé dans Tailwind CSS v3, vous devrez définir les nouvelles classes utilitaires dans la section thème du fichier tailwind.config.js.

Voici comment procéder dans le fichier de configuration JavaScript :

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Voici comment ajouter les classes à votre fichier HTML :

@import "tailwindcss" source(none);

Dans cet exemple, les classes utilitaires sont bg-background, text-light et text-lilac.

Dans Tailwind CSS v4.0, vous configurez toutes vos personnalisations en CSS avec la nouvelle directive @theme :

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

Les classes utilitaires sont ensuite ajoutées au HTML. Vous pouvez choisir d'avoir différentes nuances de la même couleur comme les couleurs Tailwind par défaut :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

Si vous le testez avec VS Code, la directive @import peut être mise en évidence comme une erreur mais ne vous inquiétez pas, cela fonctionnera très bien.

Notez que les exemples ci-dessus ont été créés avec Tailwind CSS et React, c'est pourquoi nous avons className dans le HTML et non dans la classe. Les utilitaires restent les mêmes quel que soit le framework avec lequel vous travaillez.

Variables du thème

Dans l'exemple précédent, vous pouvez voir que les variables CSS déterminent tous les styles de thème dans Tailwind v4.0 :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans la version 4.0, vous pouvez remplacer un espace de noms de thème spécifique, c'est-à-dire les utilitaires par défaut pour les couleurs, les polices, le texte, etc., ou l'intégralité du thème Tailwind et configurer le vôtre. Vous pouvez facilement configurer un style personnalisé pour pratiquement tous les utilitaires Tailwind dans le fichier CSS principal : Pour remplacer l'intégralité du thème par défaut, utilisez --*: initial. Si vous souhaitez remplacer la police Tailwind par défaut et définir la vôtre, vous utiliserez --font-*: initial suivi de votre style personnalisé :

@tailwind base;
@tailwind components;
@tailwind utilities;

Dans ce cas, font-display sera le seul utilitaire font-family disponible dans votre projet.

Vous pouvez définir le style par défaut pour une propriété personnalisée à l'aide de doubles tirets. Voici une page avec la police CSS et le style de texte Tailwind par défaut : Voici le balisage HTML de cette page :

@import "tailwindcss";

Nous utilisons les couleurs personnalisées de l'exemple précédent et configurons une nouvelle police et un nouveau style de texte :

@import "tailwindcss";

@config "../../tailwind.config.js";

Dans cet exemple, nous importons deux polices et les enregistrons sous les variables --font-display et --font-logo, à utiliser pour le logo et l'en-tête h1. Nous configurons également de nouvelles tailles de texte et un style par défaut pour les deux.

Ainsi, lorsque vous ajoutez le logo texte de la classe utilitaire dans votre HTML, l'élément aura une taille de police de 1,5rem et une épaisseur de police de 700 par défaut. De même, tout élément portant le nom de classe text-big aura une taille de police de 6rem, un poids de police de 700 et un espacement des lettres de -0,025em par défaut.

Maintenant, nous ajoutons les nouvelles classes utilitaires dans le fichier HTML :

@import "tailwindcss" source("../src");

Voici une capture d'écran de la page avec le style personnalisé : Dans Tailwind v4.0, il y aura moins de dépendance aux valeurs par défaut de Tailwind car plusieurs classes peuvent être remplacées par un seul utilitaire personnalisé. Dans notre exemple, le nom de classe text-big remplace les classes utilitaires text-5xl et text-bold pour l'en-tête h1.

Encore une fois, cela ne se limite pas à des espaces de noms spécifiques : vous pouvez le faire avec n'importe quel utilitaire.

Configuration de thème simplifiée

Certains utilitaires ne sont plus basés sur la configuration de votre thème dans Tailwind v4.0. Vous pourrez spécifier exactement ce que vous voulez directement dans votre fichier HTML sans configuration supplémentaire.

Dans Tailwind v3, vous devez définir le nombre de colonnes dans votre fichier tailwind.config.js, mais dans Tailwind v4.0, vous pouvez utiliser n'importe quel nombre allant d'aussi petit que grid-cols-5 à aussi grand que grille-cols-73. Cela s'applique également aux utilitaires z-index (par exemple, z-40) et opacity-*.

Tailwind v4.0 prend également en charge des variantes telles que data-*. Vous pouvez les utiliser sans valeurs arbitraires.

Le principal avantage de ces changements est que les développeurs pourront passer moins de temps à configurer des jetons de conception non essentiels ou non essentiels.

Échelle d'espacement dynamique

Les utilitaires d'espacement, comme m-*, w-*, mt-*, px-*, et plus encore, sont générés dynamiquement en utilisant une valeur d'espacement de base de 0,25rem définie dans la version par défaut de Tailwind v4. 0 thème.

Chaque multiple de la valeur d'espacement de base est disponible dans l'échelle d'espacement. Donc si mt-1 vaut 0,25rem, mt-2 sera 0,25rem multiplié par deux, soit 0,5rem, et mt-21 sera 5,25rem :

Vous pouvez utiliser des utilitaires d'espacement avec des valeurs qui ne sont pas explicitement définies. Dans Tailwind v3, vous devrez utiliser une valeur arbitraire comme mt-[5.25rem] ou un thème personnalisé. Aucune configuration supplémentaire n’est nécessaire et vous pouvez créer des conceptions plus cohérentes.

Si vous souhaitez limiter les valeurs d'espacement disponibles, vous pouvez désactiver la variable par défaut et définir une échelle personnalisée :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Avec cette configuration, chaque utilitaire d'espacement Tailwind n'utilisera que les valeurs spécifiquement définies.

Palette de couleurs mise à jour

Tailwind v4 passe de la palette de couleurs RVB par défaut à oklch, ce qui permet des couleurs plus vives et est moins limitée que RVB :

Prise en charge des requêtes de conteneur

Les requêtes de conteneur ont désormais une prise en charge intégrée dans Tailwind CSS v4.0 ; vous n'aurez pas besoin du plugin @tailwindcss/container-queries pour créer des conteneurs réactifs.

Les requêtes de conteneur sont utilisées pour appliquer un style à un élément en fonction de la taille de son conteneur parent. Cela signifie que la mise en page de votre site s'adapte aux composants individuels plutôt qu'à l'ensemble de la fenêtre d'affichage.

Dans la version 4.0, vous créez des requêtes de conteneur en ajoutant l'utilitaire @container à un élément parent. Pour les éléments enfants, vous utilisez des utilitaires réactifs comme @sm et @lg pour appliquer un style en fonction de la taille du parent :

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4.0 introduit également une nouvelle variante @max-* pour les requêtes de conteneur de largeur maximale. Il est plus facile d’ajouter du style lorsque le conteneur descend en dessous d’une certaine taille. Vous pouvez combiner @min-* et @max-* pour définir des plages de requêtes de conteneur :

@import "tailwindcss";

Dans ce code, le div enfant sera masqué lorsque la largeur du conteneur parent est comprise entre md et xl (768px et 1280px).

Les cas d'utilisation des requêtes de conteneur incluent la navigation, les barres latérales, les cartes, les galeries d'images et le texte réactif. Ils offrent également plus de flexibilité et sont bien pris en charge dans tous les navigateurs, vous pouvez donc commencer à les utiliser dans vos projets v4.0.

Migration de la v3 vers Tailwind CSS v4.0

Si vous souhaitez mettre à niveau un projet v3 vers la v4, Tailwind a fourni un outil de mise à niveau pour faire la plupart du travail à votre place. Pour mettre à niveau votre projet, exécutez la commande suivante :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

L'outil de mise à niveau automatisera plusieurs tâches telles que la mise à jour des dépendances, la migration de votre fichier de configuration JS vers CSS et la gestion des modifications dans vos fichiers modèles.

Tailwind recommande d'utiliser une nouvelle branche pour la mise à niveau, de conserver votre branche principale intacte et d'examiner attentivement la différence. L'exécution d'une commande git diff vous aide à voir et à comprendre les changements dans votre projet. Vous souhaiterez également tester votre projet dans un navigateur pour confirmer que tout fonctionne comme il se doit.

Les projets complexes peuvent nécessiter des ajustements manuels, et Tailwind a décrit les principaux changements et comment s'y adapter, que nous aborderons ci-dessous.

Modifications des dépendances

Plugin PostCSS : En v4.0, le plugin PostCSS est désormais disponible sous la forme d'un package dédié, @tailwindcss/postcss. Vous pouvez supprimer postcss-import et auto-prefixer du fichier postcss.config.mjs dans votre projet existant :

@tailwind base;
@tailwind components;
@tailwind utilities;

Si vous démarrez un nouveau projet, vous pouvez désormais installer Tailwind avec le plugin PostCSS en exécutant la commande suivante :

@import "tailwindcss";

Plugin Vite : Tailwind CSS v4.0 dispose également d'un nouveau plugin Vite dédié, vers lequel ils vous recommandent de migrer à partir du plugin PostCSS :

@import "tailwindcss";

@config "../../tailwind.config.js";

Comme nous l'avons vu avec PostCSS, vous pouvez installer la v4.0 avec le plugin Vite lors de la configuration d'un nouveau projet :

@import "tailwindcss" source("../src");

Tailwind CLI : L'utilisation de l'outil CLI est le moyen le plus simple et le plus rapide de configurer Tailwind CSS, et il réside désormais dans un package @tailwind/cli dédié. Vous devrez mettre à jour vos commandes de build en conséquence :

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Utilitaires obsolètes

Plusieurs utilitaires obsolètes ou non documentés ont été supprimés et remplacés par des alternatives modernes :

Configuration de l'utilitaire de conteneur

Dans la v4.0, vous configurez l'utilitaire conteneur avec @utility :

@import "tailwindcss" source(none);

Les options de configuration telles que le centre et le remplissage n'existent pas dans la version 4.0.

Modifications de l'échelle par défaut

Des ajustements d'échelle par défaut ont été apportés à chaque utilitaire d'ombre, de flou et de rayon de bordure, pour garantir qu'ils ont une valeur nommée : Vous devrez remplacer chaque utilitaire de votre projet pour vous assurer que les choses ne se produisent pas avoir l'air différent.

Changement de couleur de bordure par défaut

Dans la v3, la couleur de bordure par défaut est gris-200. Vous n'avez pas besoin de définir explicitement une couleur lorsque vous utilisez l'utilitaire de bordure :

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans Tailwind CSS v4, la couleur de la bordure est mise à jour en currentColor, et votre projet actuel peut subir un changement visuel si vous ne spécifiez pas de couleur partout où vous utilisez l'utilitaire de bordure.

Voici la couleur de bordure par défaut dans la v4.0 : Pour conserver le comportement par défaut de la v3, vous pouvez ajouter ces lignes CSS à votre projet :

@tailwind base;
@tailwind components;
@tailwind utilities;

Modification de la largeur de l'anneau par défaut

L'utilitaire ring ajoute un anneau de 3 px dans la v3, mais sa valeur par défaut est de 1 px dans la v4. Remplacez toute utilisation de l'utilitaire ring par ring-3 lors de la mise à jour de votre projet pour conserver son apparence.

Changement d'espace réservé par défaut

Dans la version 4, le texte d'espace réservé utilisera par défaut la couleur actuelle du texte avec une opacité de 50 %. Il utilise la couleur gris-400 dans la v3, et si vous souhaitez conserver ce comportement, ajoutez ceci à votre CSS :

@import "tailwindcss";

Modifications du plan

Également dans la v4, l'utilitaire outline-none n'ajoute pas de contour transparent de 2 pixels comme il le fait dans la v3. Il existe un nouvel utilitaire masqué dans le contour de la v4 qui se comporte comme aucun contour de la v3.

Lors de la mise à niveau de votre projet, vous devrez remplacer outline-none par outline-hidden pour conserver son état actuel, sauf si vous souhaitez supprimer entièrement le outline.

Ajout d'utilitaires personnalisés

Les utilitaires personnalisés fonctionnent désormais avec la nouvelle API @utility au lieu de l'utilitaire @layer. Ce changement garantit la compatibilité avec les couches de cascade natives.

Il ne s'agit plus que de noms de classe unique et non plus de sélecteurs complexes :

@import "tailwindcss";

@config "../../tailwind.config.js";

Empilement de variantes sensibles à l'ordre

Tailwind v4.0 empile les variantes comme la première et la dernière de gauche à droite, vous devrez donc trier les variantes dans votre projet.

Variables CSS en valeurs arbitraires

La syntaxe des variables dans des valeurs arbitraires est passée des crochets aux parenthèses pour éviter toute ambiguïté avec les nouvelles normes CSS. Vous devrez mettre à jour ceci dans votre projet :

@import "tailwindcss" source("../src");

Utilisation de la fonction theme()

Tailwind CSS v4.0 génère des variables pour toutes les valeurs de thème, la fonction theme() n'est donc pas nécessaire. Tailwind recommande que toutes les fonctions theme() de votre projet soient remplacées par des variables CSS dans la mesure du possible :

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Pour plus de détails sur les modifications à venir dans Tailwind v4.0, vous devriez visiter la documentation préliminaire.

Tailwind et frameworks CSS alternatifs

L'alternative la plus évidente à Tailwind CSS est Bootstrap, le framework CSS le plus populaire au monde. Il dispose d'une vaste bibliothèque de composants prédéfinis.

Bootstrap est peut-être plus convivial pour les débutants que Tailwind CSS. Vous pouvez créer des composants prêts à l'emploi en utilisant des noms de classe spécifiques et simples. Tailwind vous oblige à comprendre les utilitaires et leurs règles CSS sous-jacentes.

Un autre avantage de Bootstrap par rapport à Tailwind CSS est qu'il inclut JavaScript par défaut, ce qui vous permet de faire plus de choses en back-end. Tailwind CSS doit être combiné avec les frameworks JS.

Cependant, Bootstrap n'est pas aussi personnalisable ni aussi flexible que Tailwind CSS. Un argument de longue date est que tous les sites Bootstrap se ressemblent. Avec son approche axée sur l'utilité, Tailwind offre plus de flexibilité et de contrôle.

Inconvénients du CSS Tailwind

De plus en plus de frameworks CSS axés sur les utilitaires sont apparus ces dernières années, comme Missing.css et Mojo CSS. Aucun n’a réussi à prendre la couronne à Tailwind, mais cela ne veut pas dire que ce n’est pas sans son lot de limites :

Courbe d'apprentissage abrupte : Comme mentionné précédemment, l'approche axée sur l'utilité d'abord et le grand nombre de cours peuvent être difficiles à apprendre pour les débutants.

Lisibilité du code : Comme vous travaillez principalement dans votre fichier HTML, le code peut devenir difficile à lire à mesure que chaque élément accumule des utilitaires.

Conception incohérente : La flexibilité de Tailwind CSS peut conduire à des conceptions incohérentes dans un projet si vous n'y prêtez pas attention.

Changement de framework : les projets peuvent être étroitement couplés à Tailwind CSS, ce qui rend difficile le passage à un autre framework.

Transition vers Tailwind CSS v4.0

Mettre à niveau vos projets existants vers la nouvelle version de Tailwind peut sembler une tâche difficile, et cela est vrai si vous avez un projet complexe, mais les avantages en valent la peine. Tailwind rend tout plus rapide et plus simple en supprimant des outils et des fichiers supplémentaires et en fournissant une syntaxe plus claire.

---

Votre interface monopolise-t-elle le processeur de vos utilisateurs ?

À mesure que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l'utilisation du processeur côté client, l'utilisation de la mémoire et bien plus encore pour tous vos utilisateurs en production, essayez LogRocket.

LogRocket est comme un DVR pour les applications Web et mobiles, enregistrant tout ce qui se passe dans votre application Web, votre application mobile ou votre site Web. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et créer des rapports sur les principales mesures de performances du front-end, rejouer les sessions utilisateur avec l'état de l'application, enregistrer les requêtes réseau et faire apparaître automatiquement toutes les erreurs.

Modernisez la façon dont vous déboguez les applications Web et mobiles : démarrez la surveillance gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!