Tailwind CSS : Comprendre les bases du framework utility-first

Tailwind est un framework CSS utilitaire qui permet de styliser des composants directement dans le HTML, sans nécessiter d'écrire de code CSS.

Contrairement aux méthodes traditionnelles, où les styles sont définis dans des fichiers CSS séparés, Tailwind vous permet d'appliquer des classes utilitaires directement sur les éléments HTML. Cette approche optimise la productivité en éliminant la gestion de fichiers CSS volumineux.

L'objectif de cet article n'est pas de lister toutes les classes utilitaires de Tailwind, car la documentation de Tailwind fournit une recherche intelligente qui vous permet de trouver facilement les classes dont vous avez besoin. Il vous suffit d'appuyer sur ⌘ + K et la recherche vous proposera des suggestions pertinentes. De plus, les classes Tailwind sont très simples à comprendre, surtout si vous maîtrisez déjà le CSS. Par exemple :

• flex correspond à display: flex
• font-medium correspond à font-weight: 500
• text-red correspond à color: red
• text-sm correspond à font-size: 0.875rem

Cet article a pour objectif de vous présenter les concepts clés de Tailwind CSS. Nous y aborderons plusieurs de ces concepts, tels que la gestion des pseudo-classes, des pseudo-éléments, ainsi que l'approche mobile-first et le mode sombre.

Le principe « Utility-First »

Tailwind repose sur une approche dite utility-first, ce qui signifie qu'il fournit des classes CSS préconfigurées pour accomplir des tâches spécifiques comme p-4 (padding de 1rem) ou text-center (texte centré). Au lieu d'écrire des classes CSS personnalisées pour styliser vos éléments (par exemple btn-primary), vous combinez simplement ces classes utilitaires pour atteindre le design souhaité.

Avantages de Tailwind CSS

Noms de classes simplifiés

Tailwind CSS élimine le besoin de passer du temps à inventer des noms de classes abstraits. Chaque classe utilitaire a un nom explicite et direct qui reflète le style appliqué, ce qui rend le code plus lisible.

Réduction de la taille des fichiers CSS

Contrairement aux frameworks traditionnels, où chaque nouvelle fonctionnalité alourdit le fichier CSS, Tailwind optimise la taille du fichier en générant uniquement le CSS nécessaire. Seules les classes effectivement utilisées dans votre projet sont incluses lors de la compilation, limitant ainsi la croissance exponentielle du fichier CSS à mesure que le projet se développe.

Moins de risques de régressions

En CSS classique, les règles sont souvent globales, ce qui peut rendre les modifications risquées puisque toucher à une règle peut affecter d'autres éléments de manière imprévue. Avec Tailwind, les classes sont appliquées directement aux éléments HTML, ce qui rend le processus de modification plus sûr et prévisible.

Configuration de Tailwind CSS

Lors de l’utilisation de Tailwind CSS, quatre couches principales sont utilisées pour organiser et gérer les styles : @layer theme, @layer base, @layer components, et @layer utilities. Ces couches sont essentielles pour structurer efficacement le CSS dans vos projets.

@layer theme

La couche @layer theme permet de centraliser et personnaliser les variables globales du thème, telles que les couleurs, les polices, les espacements et d’autres valeurs liées au design. Cela permet d’assurer une personnalisation cohérente et de maintenir une architecture modulaire pour l’ensemble de votre projet.

@theme {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-primary: #000;
}

Si vous avez déjà une palette de couleurs définie dans votre projet et souhaitez désactiver les couleurs générées par défaut par Tailwind, vous pouvez utiliser la méthode suivante. Il suffit d’ajouter --color-*: initial dans votre configuration @theme. Cette opération supprimera toutes les couleurs par défaut de Tailwind lors du processus de génération du fichier CSS. Vous pouvez appliquer la même méthode pour d’autres variables, comme les polices ou les tailles.

@layer theme {
  --color-*: initial;
}

@layer base

Cette couche permet d'injecter ce qu'on appelle le Preflight. Preflight est un ensemble de styles de base conçu pour homogénéiser les différences entre navigateurs, vous offrant ainsi une base cohérente sur laquelle construire votre design. Il va désactiver les styles par défaut appliqués à certaines balises HTML comme <h1>, <ul>, <ol>, <blockquote>, et bien d'autres. Cela vous permet de commencer avec une toile neutre et uniforme, indépendamment du navigateur utilisé.

@layer components

Cette couche est utilisée pour gérer les composants CSS réutilisables. Elle vous permet de définir des classes personnalisées pour des composants plus complexes, tout en conservant l'architecture "utility-first" de Tailwind. Ces composants peuvent être des ensembles de classes groupées ou des structures plus sophistiquées comme des boutons ou des cartes réutilisables à travers toute l'application.

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
  }
}

@layer utilities

Cette couche charge toutes les classes utilitaires qui sont au cœur de Tailwind CSS. Ces classes utilitaires sont destinées à styliser rapidement des éléments avec des propriétés CSS simples (comme des marges, des tailles, des couleurs, etc.). 

Les principales directives de Tailwind CSS

Les directives de Tailwind CSS permettent d’étendre, personnaliser et organiser les styles CSS de manière efficace.

@theme : Sert à définir des variables de thème personnalisées, comme des couleurs, polices, ...

@theme {
  --color-primary: #000;
  --font-body: "Montserrat-Medium", sans-serif;
}

@source : Permet de spécifier explicitement des fichiers sources pour s’assurer qu’ils sont pris en compte par Tailwind lors de l’analyse des classes CSS.

@source "src/index.php";

@utility : Permet de créer des classes utilitaires personnalisées.

@utility font-14 {
  font-size: 14;
}

@variant : Applique une variante Tailwind spécifique à des styles CSS.

body {
  background: white;

  @variant dark {
    background: black;
  }
}

@apply : Permet d’inclure directement des classes utilitaires existantes dans votre propre CSS.

.btn-primary {
    @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
}

Gestion des pseudo-classes et pseudo-éléments CSS

Chaque classe utilitaire de Tailwind peut être appliquée conditionnellement en ajoutant une pseudo-classe au début du nom de la classe pour décrire la condition que vous souhaitez cibler. Par exemple :

• hover:bg-gray-200 : Change la couleur de fond au survol.
• active:bg-gray-500 : Applique un fond différent lorsque l'élément est actif.
• focus:outline-none : Supprime le contour de l'élément au focus.
• first:pt-0 : Cible le premier enfant et applique un padding-top de 0.
• last:pb-0 : Cible le dernier enfant et applique un padding-bottom de 0.

De même, pour les formulaires, vous pouvez cibler des états comme :

• disabled:border-slate-200 : Applique une bordure spécifique quand l'élément est désactivé.
• required:border-red-500 : Applique une bordure rouge quand un champ est obligatoire.

Pour définir un pseudo-élément, il suffit de le préfixer avec before: ou after:. Par exemple :

• after:ml-2 : Ajoute une marge gauche au pseudo-élément ::after.
• before:px-4 : Ajoute un padding horizontal au pseudo-élément ::before.

Responsive Design

L'un des grands avantages de Tailwind est sa capacité à gérer facilement le responsive design en appliquant des classes utilitaires conditionnellement à différents breakpoints. Cela vous permet de créer des interfaces réactives sans quitter votre HTML.

Règle importante : Tailwind utilise un système de points d'arrêt mobile-first. Cela signifie que les classes non préfixées (par exemple text-center) s'appliquent à toutes les tailles d'écran, tandis que les classes préfixées (par exemple md:text-center) ne s'appliquent qu'à partir du breakpoint spécifié et au-dessus.

Exemple :

<div class="text-center sm:text-left"></div>

Dans cet exemple, le texte sera centré par défaut, mais il sera aligné à gauche sur les écrans de taille sm (640px et plus).

Si vous souhaitez appliquer un utilitaire uniquement à une plage spécifique de points d'arrêt, vous pouvez combiner un préfixe breakpoint avec un modificateur max-*. Par exemple :

<div class="md:max-xl:flex"></div>

Mode sombre

Tailwind facilite l'intégration du mode sombre avec la classe utilitaire dark. Vous pouvez facilement appliquer un style différent pour le mode sombre en utilisant cette classe.

Exemple :

<div class="bg-white dark:bg-slate-800">Contenu ici</div>

Dans cet exemple, la couleur de fond sera bg-white pour le mode clair et bg-slate-800 pour le mode sombre.

Par défaut, Tailwind utilise la fonctionnalité CSS prefers-color-scheme pour détecter si un utilisateur a sélectionné un thème clair ou sombre dans son système d'exploitation ou son navigateur.

Cependant, vous pouvez également gérer le basculement manuel entre les modes clair et sombre en activant la stratégie « selector ». Dans ce cas, les classes dark:{class} seront appliquées dès que la classe dark est présente dans la balise <html>.