Section courante

A propos

Section administrative du site

Style avec des classes utilitaires

Création de composantes complexes à partir d'un ensemble limité d'utilitaires primitifs.

Aperçu

Avec Tailwind, vous stylisez vos éléments en combinant directement dans votre balisage de nombreuses classes de présentation à usage unique (classes utilitaires) :

  1. <div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
  2.   <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  3.   <div>
  4.     <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
  5.     <p class="text-gray-500 dark:text-gray-400">Vous avez un nouveau message !</p>
  6.   </div>
  7. </div>

Par exemple, dans l'interface utilisateur ci-dessus, nous avons utilisé :

Cette approche de style va à l'encontre de nombreuses bonnes pratiques traditionnelles, mais une fois que vous l'aurez essayée, vous constaterez rapidement des avantages considérables :

Ces avantages font une grande différence sur les petits projets, mais ils sont encore plus précieux pour les équipes travaillant sur des projets de longue durée et à grande échelle.

Pourquoi ne pas simplement utiliser des styles en ligne ?

On entend souvent dire : «N'est-ce pas tout simplement des styles en ligne ?» Et d'une certaine manière, oui : on applique des styles directement aux éléments au lieu de leur attribuer un nom de classe puis de styliser cette classe.

Cependant, l'utilisation de classes utilitaires présente de nombreux avantages importants par rapport aux styles en ligne, par exemple :

Cette composante est entièrement adaptatif et comprend un bouton avec des styles de survol et d'activation, et est entièrement construit avec des classes utilitaires :

  1. <div class="flex flex-col gap-2 p-8 sm:flex-row sm:items-center sm:gap-6 sm:py-4 ...">
  2.   <img class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/steve-tremblay.jpg" alt="" />
  3.   <div class="space-y-2 text-center sm:text-left">
  4.     <div class="space-y-0.5">
  5.       <p class="text-lg font-semibold text-black">Steve Tremblay</p>
  6.       <p class="font-medium text-gray-500">Ingénieur produit</p>
  7.     </div>
  8.     <button class="border-purple-200 text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white active:bg-purple-700 ...">
  9.       Message
  10.     </button>
  11.   </div>
  12. </div>

Penser en classes utilitaires

Style des états de survol et de focus

Pour styliser un élément lors de l'obtention d'un état comme le survol ou le focus, préfixez la classe utilitaire avec l'état ciblé, par exemple 'hover:bg-sky-700' :

  1. <button class="bg-sky-500 hover:bg-sky-700 ...">Enregistrer les modifications</button>

Ces préfixes sont appelés variantes dans Tailwind, et ils n'appliquent les styles d'une classe utilitaire que lorsque la condition de cette variante est remplie.

Voici à quoi ressemble le CSS généré pour la classe hover:bg-sky-700 :

  1. .hover\:bg-sky-700 {
  2.   &:hover {
  3.     background-color: var(--color-sky-700);
  4.   }
  5. }

Remarquez que cette classe reste inactive tant que l'élément n'est pas survolé. Son seul rôle est de définir les styles au survol, rien de plus.

C'est différent du CSS traditionnel, où une seule classe gère généralement les styles pour plusieurs états :

  1. <button class="btn">Enregistrer les modifications</button>
  2. <style>
  3.   .btn {
  4.     background-color: var(--color-sky-500);
  5.     &:hover {
  6.       background-color: var(--color-sky-700);
  7.     }
  8.   }
  9. </style>

Vous pouvez même empiler des variantes dans Tailwind pour appliquer un utilitaire lorsque plusieurs conditions correspondent, comme combiner hover: et disabled:

  1. <button class="bg-sky-500 disabled:hover:bg-sky-500 ...">Enregistrer les modifications</button>

Requêtes média et points de rupture

Tout comme pour les états de survol et de focus, vous pouvez styliser des éléments à différents points de rupture en préfixant n'importe quelle fonction utilitaire avec le point de rupture auquel vous souhaitez appliquer ce style :

  1. <div class="grid grid-cols-2 sm:grid-cols-3">
  2.   <!-- ... -->
  3. </div>

Dans l'exemple ci-dessus, le préfixe sm: garantit que grid-cols-3 ne se déclenche qu'à partir du point de rupture sm, étant de 40rem par défaut :

  1. .sm\:grid-cols-3 {
  2.   @media (width >= 40rem) {
  3.     grid-template-columns: repeat(3, minmax(0, 1fr));
  4.   }
  5. }

Ciblage du mode sombre

Pour styliser un élément en mode sombre, il suffit d'ajouter le préfixe `dark:` à l'utilitaire que vous souhaitez appliquer lorsque le mode sombre est actif :

  1. <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  2.   <div>
  3.     <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
  4.       <svg
  5.         class="h-6 w-6 text-white"
  6.         fill="none"
  7.         viewBox="0 0 24 24"
  8.         stroke="currentColor"
  9.         aria-hidden="true"
  10.       >
  11.         <!-- ... -->
  12.       </svg>
  13.     </span>
  14.   </div>
  15.   <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Écrit à l'envers</h3>
  16.   <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
  17.     Le stylo Zero Gravity permet d'écrire dans n'importe quelle orientation, même à l'envers. Il fonctionne même dans l'espace.
  18.   </p>
  19. </div>

Tout comme pour les états de survol ou les requêtes média, il est important de comprendre qu'une seule classe utilitaire n'inclura jamais à la fois les styles clair et sombre ; vous stylisez les éléments en mode sombre en utilisant plusieurs classes, une pour les styles du mode clair et une autre pour les styles du mode sombre :

  1. .dark\:bg-gray-800 {
  2.   @media (prefers-color-scheme: dark) {
  3.     background-color: var(--color-gray-800);
  4.   }
  5. }

Utilisation de la composition de classes

Avec Tailwind, il est fréquent d'utiliser plusieurs classes pour définir la valeur d'une seule propriété CSS, par exemple pour ajouter plusieurs filtres à un élément :

  1. <div class="blur-sm grayscale">
  2.   <!-- ... -->
  3. </div>

Ces deux effets reposent sur la propriété `filter` en CSS; Tailwind utilise donc des variables CSS pour permettre de les combiner :

  1. .blur-sm {
  2.   --tw-blur: blur(var(--blur-sm));
  3.   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);
  4. }
  5. .grayscale {
  6.   --tw-grayscale: grayscale(100%);
  7.   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);
  8. }

Le CSS généré ci-dessus est légèrement simplifié, mais l'astuce consiste à définir une variable CSS pour chaque effet spécifique. La propriété `filter` examine ensuite toutes ces variables et ne renvoie aucune valeur si la variable n'est pas définie.

Tailwind utilise cette même approche pour les dégradés, les couleurs d'ombre, les transformations,...

Utilisation de valeurs arbitraires

De nombreuses utilitaires de Tailwind sont pilotés par des variables de thème, telles que bg-blue-500, text-xl et shadow-md, correspondant à votre palette de couleurs, à l'échelle de votre texte et aux ombres.

Lorsque vous devez utiliser une valeur ponctuelle en dehors de votre thème, utilisez la syntaxe spéciale entre crochets pour spécifier des valeurs arbitraires :

  1. <button class="bg-[#316ff6] ...">
  2.   Se connecter avec Facebook
  3. </button>

Cela peut s'avérer utile pour des couleurs ponctuelles hors de votre palette (comme le bleu Facebook ci-dessus), mais aussi lorsque vous avez besoin d'une valeur personnalisée complexe, comme une grille très spécifique :

  1. <div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">
  2.   <!-- ... -->
  3. </div>

C'est également utile lorsque vous devez utiliser des fonctionnalités CSS comme calc(), même si vous utilisez les valeurs de votre thème :

  1. <div class="max-h-[calc(100dvh-(--spacing(6)))]">
  2.   <!-- ... -->
  3. </div>

Il existe même une syntaxe permettant de générer du CSS totalement arbitraire, y compris un nom de propriété arbitraire, ce qui peut être utile pour définir des variables CSS :

  1. <div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">
  2.   <!-- ... -->
  3. </div>

Comment ça marche ?

Tailwind CSS n'est pas une simple feuille de style statique comme celles utilisées par d'autres cadres d'application CSS. Il génère le CSS nécessaire en fonction des classes que vous utilisez lors de la compilation.

Pour ce faire, il analyse tous les fichiers de votre projet à la recherche de symboles pouvant correspondre à un nom de classe.

  1. export default function Button({ size, children }) {
  2.   let sizeClasses = {
  3.     md: "px-4 py-2 rounded-md text-base",
  4.     lg: "px-5 py-3 rounded-lg text-lg",
  5.   }[size];
  6.   return (
  7.     <button type="button" className={`font-bold ${sizeClasses}`}>
  8.       {children}
  9.     </button>
  10.   );
  11. }

Une fois toutes les classes potentielles identifiées, Tailwind génère le CSS correspondant et le compile en une seule feuille de style ne contenant que les styles nécessaires.

Comme le CSS est généré à partir du nom de la classe, Tailwind peut reconnaître les classes utilisant des valeurs arbitraires telles que `bg-[#316ff6]` et générer le CSS nécessaire, même si la valeur ne fait pas partie de votre thème.

Sélecteurs complexes

Il est parfois nécessaire de styliser un élément en fonction de plusieurs conditions, par exemple en mode sombre, à un point de rupture spécifique, au survol de la souris et lorsque l'élément possède un attribut de données particulier.

Voici un exemple avec Tailwind :

  1. <button class="dark:lg:data-current:hover:bg-indigo-600 ...">
  2.   <!-- ... -->
  3. </button>
  1. @media (prefers-color-scheme: dark) and (width >= 64rem) {
  2.   button[data-current]:hover {
  3.     background-color: var(--color-indigo-600);
  4.   }
  5. }

Tailwind prend également en charge des fonctionnalités comme group-hover, vous permettant de styliser un élément lorsqu'un parent spécifique est survolé :

  1. <a href="#" class="group rounded-lg p-8">
  2.   <!-- ... -->
  3.   <span class="group-hover:underline">En savoir plus...</span>
  4. </a>
  1. @media (hover: hover) {
  2.   a:hover span {
  3.     text-decoration-line: underline;
  4.   }
  5. }

Cette syntaxe `group-*` fonctionne également avec d'autres variantes, comme `group-focus`, `group-active`, et bien d'autres.

Pour les scénarios vraiment complexes (notamment lors de la mise en forme de HTML que vous ne contrôlez pas), Tailwind prend en charge des variantes arbitraires qui vous permettent d'écrire n'importe quel sélecteur directement dans un nom de classe :

  1. <div class="[&>[data-active]+span]:text-blue-600 ...">
  2.   <span data-active><!-- ... --></span>
  3.   <span>Ce texte sera bleu</span>
  4. </div>
  1. div > [data-active] + span {
  2.   color: var(--color-blue-600);
  3. }

Quand utiliser les styles en ligne

Les styles en ligne restent très utiles dans les projets Tailwind CSS, notamment lorsqu'une valeur provient d'une source dynamique comme une base de données ou une API :

  1. export function BrandedButton({ buttonColor, textColor, children }) {
  2.   return (
  3.     <button
  4.       style={{
  5.         backgroundColor: buttonColor,
  6.         color: textColor,
  7.       }}
  8.       className="rounded-md px-3 py-1.5 font-medium"
  9.     >
  10.       {children}
  11.     </button>
  12.   );
  13. }

Vous pouvez également opter pour un style en ligne pour les valeurs arbitraires très complexes qui sont difficiles à lire lorsqu'elles sont formatées comme un nom de classe :

  1. export function BrandedButton({ buttonColor, textColor, children }) {
  2.   return (
  3.     <button
  4.       style={{
  5.         backgroundColor: buttonColor,
  6.         color: textColor,
  7.       }}
  8.       className="rounded-md px-3 py-1.5 font-medium"
  9.     >
  10.       {children}
  11.     </button>
  12.   );
  13. }

Un autre modèle utile consiste à définir des variables CSS à partir de sources dynamiques à l'aide de styles en ligne, puis à référencer ces variables avec des classes utilitaires :

  1. export function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) {
  2.   return (
  3.     <button
  4.       style={{
  5.         "--bg-color": buttonColor,
  6.         "--bg-color-hover": buttonColorHover,
  7.         "--text-color": textColor,
  8.       }}
  9.       className="bg-(--bg-color) text-(--text-color) hover:bg-(--bg-color-hover) ..."
  10.     >
  11.       {children}
  12.     </button>
  13.   );
  14. }

Gestion des duplications

Lorsque vous développez des projets entiers à l'aide de classes utilitaires, vous serez inévitablement amené à répéter certains modèles pour recréer le même design à différents endroits.

Par exemple, ici, les classes utilitaires de chaque image d'avatar sont répétées cinq fois :

  1. <div>
  2.   <div class="flex items-center space-x-2 text-base">
  3.     <h4 class="font-semibold text-slate-900">Contributeurs</h4>
  4.     <span class="bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...">204</span>
  5.   </div>
  6.   <div class="mt-3 flex -space-x-2 overflow-hidden">
  7.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="photo-1" alt="" />
  8.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="photo-2" alt="" />
  9.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="photo-3" alt="" />
  10.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="photo-4" alt="" />
  11.     <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="photo-5" alt="" />
  12.   </div>
  13.   <div class="mt-3 text-sm font-medium">
  14.     <a href="#" class="text-blue-500">+ 198 autres personnes</a>
  15.   </div>
  16. </div>

Pas de panique ! En pratique, ce n'est pas le problème que vous craignez, et les stratégies pour y faire face sont des choses que vous faites déjà tous les jours.

Utilisation des boucles

Bien souvent, un élément graphique apparaissant plusieurs fois sur la page rendue n'est en réalité créé qu'une seule fois, car le balisage est généré dans une boucle.

Par exemple, les avatars dupliqués au début de ce guide seraient presque certainement générés dans une boucle dans un projet réel :

  1. <div>
  2.   <div class="flex items-center space-x-2 text-base">
  3.     <h4 class="font-semibold text-slate-900">Contributeurs</h4>
  4.     <span class="bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...">204</span>
  5.   </div>
  6.   <div class="mt-3 flex -space-x-2 overflow-hidden">
  7.     {#each contributors as user}
  8.       <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src={user.avatarUrl} alt={user.handle} />
  9.     {/each}
  10.   </div>
  11.   <div class="mt-3 text-sm font-medium">
  12.     <a href="#" class="text-blue-500">+ 198 autres personnes</a>
  13.   </div>
  14. </div>

Lorsque les éléments sont rendus en boucle comme ceci, la liste des classes n'est écrite qu'une seule fois, il n'y a donc pas de problème de duplication à résoudre.

Utilisation de l'édition multi-curseurs

Lorsque la duplication est localisée dans un groupe d'éléments d'un même fichier, la méthode la plus simple consiste à utiliser l'édition multi-curseurs pour sélectionner et modifier rapidement la liste des classes de chaque élément simultanément :

  1. <nav class="flex justify-center space-x-4">
  2.   <a href="/dashboard" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
  3.     Accueil
  4.   </a>
  5.   <a href="/team" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
  6.     Équipe
  7.   </a>
  8.   <a href="/projects" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
  9.     Projets
  10.   </a>
  11.   <a href="/reports" class="font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
  12.     Rapports
  13.   </a>
  14. </nav>

Vous seriez surpris de voir à quel point cette solution s'avère souvent la meilleure. Si vous pouvez modifier rapidement et simultanément toutes les listes de classes dupliquées, il est inutile d'introduire une abstraction supplémentaire.

Utilisation des composantes

Si vous devez réutiliser certains styles dans plusieurs fichiers, la meilleure stratégie consiste à créer une composante si vous utilisez un cadre d'application front-end comme React, Svelte ou Vue, ou un modèle partiel si vous utilisez un langage de gabarit comme Blade, ERB, Twig ou Nunjucks.

  1. export function VacationCard({ img, imgAlt, eyebrow, title, pricing, url }) {
  2.   return (
  3.     <div>
  4.       <img className="rounded-lg" src={img} alt={imgAlt} />
  5.       <div className="mt-4">
  6.         <div className="text-xs font-bold text-sky-500">{eyebrow}</div>
  7.         <div className="mt-1 font-bold text-gray-700">
  8.           <a href={url} className="hover:underline">
  9.             {title}
  10.           </a>
  11.         </div>
  12.         <div className="mt-2 text-sm text-gray-600">{pricing}</div>
  13.       </div>
  14.     </div>
  15.   );
  16. }

Vous pouvez désormais utiliser ce composant à autant d'endroits que vous le souhaitez, tout en conservant une source unique de référence pour les styles, ce qui permet de les mettre à jour facilement et simultanément en un seul endroit.

Utilisation de CSS personnalisé

Si vous utilisez un langage de gabarit comme ERB ou Twig plutôt que React ou Vue, créer un modèle partiel pour un simple bouton peut sembler disproportionné par rapport à une classe CSS simple comme `btn`.

Bien qu'il soit fortement recommandé de créer des modèles partiels adaptés aux composants plus complexes, l'utilisation de CSS personnalisé est tout à fait acceptable lorsqu'un modèle partiel paraît trop lourd.

Voici à quoi pourrait ressembler une classe `btn-primary`, utilisant des variables de thème pour garantir la cohérence du design :

  1. <button class="btn-primary">Enregistrer les modifications</button>
  1. @import "tailwindcss";
  2. @layer components {
  3.   .btn-primary {
  4.     border-radius: calc(infinity * 1px);
  5.     background-color: var(--color-violet-500);
  6.     padding-inline: --spacing(5);
  7.     padding-block: --spacing(2);
  8.     font-weight: var(--font-weight-semibold);
  9.     color: var(--color-white);
  10.     box-shadow: var(--shadow-md);
  11.     &:hover {
  12.       @media (hover: hover) {
  13.         background-color: var(--color-violet-700);
  14.       }
  15.     }
  16.   }
  17. }

Cependant, pour tout ce qui est plus complexe qu'un simple élément HTML, nous recommandons fortement l'utilisation de modèles partiels afin que les styles et la structure puissent être encapsulés en un seul endroit.

Gestion des conflits de styles

Classes utilitaires conflictuelles

Lorsque deux classes ciblent la même propriété CSS, c'est la dernière classe définie dans la feuille de style qui prévaut. Dans cet exemple, l'élément recevra donc `display: grid` même si `flex` apparaît en dernier dans l'attribut de classe :

  1. <div class="grid flex">
  2.   <!-- ... -->
  3. </div>
  1. .flex {
  2.   display: flex;
  3. }
  4. .grid {
  5.   display: grid;
  6. }

En règle générale, il ne faut jamais ajouter deux classes conflictuelles au même élément ; il faut n'ajouter que celle que vous souhaitez réellement appliquer :

  1. export function Example({ gridLayout }) {
  2.   return <div className={gridLayout ? "grid" : "flex"}>{/* ... */}</div>;
  3. }

Avec des bibliothèques basées sur des composants comme React ou Vue, cela signifie souvent exposer des propriétés spécifiques pour les personnalisations de style au lieu de laisser les utilisateurs ajouter des classes supplémentaires depuis l'extérieur d'un composant, car ces styles entrent souvent en conflit.

Utilisation du modificateur important

Lorsque vous devez absolument forcer l'application d'une classe utilitaire spécifique et que vous n'avez aucun autre moyen de gérer cette spécificité, vous pouvez ajouter ! à la fin du nom de la classe pour rendre toutes les déclarations !important :

  1. <div class="bg-teal-500 bg-red-500!">
  2.   <!-- ... -->
  3. </div>
  1. .bg-red-500\! {
  2.   background-color: var(--color-red-500) !important;
  3. }
  4. .bg-teal-500 {
  5.   background-color: var(--color-teal-500);
  6. }

Utilisation de l'indicateur « !important »

Si vous ajoutez Tailwind à un projet contenant déjà du CSS complexe avec des règles très spécifiques, vous pouvez utiliser l'indicateur «!important» lors de l'importation de Tailwind pour marquer tous les utilitaires comme « !important ».

  1. @import "tailwindcss" important;
  1. @layer utilities {
  2.   .flex {
  3.     display: flex !important;
  4.   }
  5.   .gap-4 {
  6.     gap: 1rem !important;
  7.   }
  8.   .underline {
  9.     text-decoration-line: underline !important;
  10.   }
  11. }

Utilisation de l'option de préfixe

Si votre projet contient des noms de classes entrant en conflit avec les utilitaires CSS de Tailwind, vous pouvez préfixer toutes les classes et variables CSS générées par Tailwind à l'aide de l'option de préfixe :

  1. @import "tailwindcss" prefix(tw);
  1. @layer theme {
  2.   :root {
  3.     --tw-color-red-500: oklch(0.637 0.237 25.331);
  4.   }
  5. }
  6. @layer utilities {
  7.   .tw&#92;:text-red-500 {
  8.     color: var(--tw-color-red-500);
  9.   }
  10. }

Dernière mise à jour : Dimanche, le 12 janvier 2025