Le framework Tailwind CSS a été créé en 2017 par Adam Wathan (paraît-il, dans la nuit d'Halloween !). Ce qui n'était alors qu'un projet personnel est devenu plutôt célèbre depuis, et les versions se sont enchaînées rapidement pour en arriver à la 4.1 actuellement. Au début, j'étais plutôt réservé par rapport à cette syntaxe volubile au sein du HTML, dont on m'avait soigneusement appris à préserver la pureté, en déléguant toute la stylisation à des feuilles distinctes. Mais, peu à peu, surtout au vu du succès grandissant de ce framework, j'ai commencé à l'utiliser, puis à l'apprécier.
La démarche est simple et cohérente : la question du CSS est réglée directement dans le HTML, ce qui évite les incessants allers-retours avec les feuilles CSS. Ce framework est qualifié d'« utility first ». Derrière cette appellation curieuse se cache un concept très simple : plutôt que de fournir des composants prêts à l'emploi, comme le font Bootstrap et d'autres frameworks, on se contente de proposer des classes utilitaires de base. Il faut donc partir de cette base pour s'occuper du design. Mais pour les plus paresseux, de nombreux concepteurs ont pris le temps de compléter l'équipement de base de Tailwind en proposant des collections de composants (par exemple DaisyUI qui est la plus utilisée) prêts à l'emploi.
Le fait d'utiliser Tailwind n'exonère pas d'une solide connaissance du HTML5 et du CSS3 ! Alors si vous avez des lacunes dans ce domaine, je vous conseille d'étudier un peu la question avant d'aborder Taiwind. Pour info, j'ai rédigé quelques articles dans ce blog concernant CSS3.
Je me suis amusé à faire une page de présentation de la version 4 de Tailwind. Elle est purement Tailwind à part le flottement du titre. Bon, elle n'est pas aussi jolie que la page d'accueil du site officiel !
Installer Tailwind
Si vous lisez cet article, c'est sans doute que vous êtes un utilisateur régulier de Laravel et vous n'avez pas trop à vous soucier de la manière de l'installer étant donné qu'il est largement utilisé dans la plupart des kits de démarrage. Mais pour être complet, je vais évoquer rapidement comment procéder à cette installation.
Le plus simple est certainement d'utiliser un CDN, mais il faut réserver cet usage pour le développement. En effet, une caractéristique de Tailwind est de générer les styles utiles pour votre projet en scannant tous vos fichiers HTML. Ça permet d'avoir vraiment le strict nécessaire et d'alléger le chargement. Mais c'est évidemment incompatible avec l'utilisation d'un CDN. Toutefois, cette option est pratique pour le développement.
Je ne vais pas développer toutes les manières d'installer Tailwind (Vite, PostCSS, CLI...), vous les trouvez très bien expliquées sur le site officiel, avec même une page dédiée à Laravel. Une option intéressante pour faire vos essais est d'utiliser le playground.
Le principe
Comprendre le principe de base est toujours important parce qu'il constitue le socle de toute connaissance. Commençons par l'exemple tout simple d'un bouton. Dans la démarche classique, je pose un HTML tout propre en prévoyant une classe :
<button class="bouton-classique">
Cliquez-moi !
</button>Ce qui au départ a un aspect très basique dépendant des styles du navigateur :
Et ensuite, je mets tout ça en forme selon mes goûts :
<style>
.bouton-classique {
/* Arrière-plan et texte */
background-color: #3b82f6; /* Bleu par défaut */
color: white;
/* Police et espacement */
font-size: 1rem;
font-weight: 600; /* Semi-gras */
padding: 10px 20px;
/* Bordure et coins arrondis */
border: none;
border-radius: 8px; /* Coins légèrement arrondis */
cursor: pointer;
/* Transition pour l'effet de survol */
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.bouton-classique:hover {
background-color: #2563eb; /* Bleu plus foncé au survol */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}
.bouton-classique:active {
background-color: #1d4ed8; /* Bleu encore plus foncé au clic */
}
</style>Avec un résultat adapté :
Avec un effet plus sombre au survol (hover) et une ombre discrète.
Si on veut le même résultat avec Tailwind, on va utiliser les classes qu'il nous propose :
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out active:bg-blue-700 cursor-pointer">
Cliquez-moi !
</button>Et on aura le même résultat !
Je ne vais pas entrer directement dans le détail de toutes ces classes, le but est juste de montrer le principe de Tailwind avec un exemple relativement simple. On peut estimer que la syntaxe utilisée est plutôt lourde et que le HTML devient illisible. Mais avec un peu d'habitude, on finit par trouver tout ça naturel ! Ou presque...
Du caractère
Dans un site web, on a principalement du texte et des images. Il convient de bien gérer l'aspect de ces éléments. Intéressons-nous pour le moment au texte.
Mais que fait la police ?
Avec le CSS, on peut régler de multiples éléments de la police :
- font-family : définit la police de caractères (ex: Arial, "Times New Roman")
- font-size : contrôle la taille du texte (ex: 16px, 1.2em)
- font-weight : gère la graisse du texte (ex: bold ou valeurs numériques comme 600)
- font-style : applique le style italique (italic) ou oblique
- ...
Prenons un exemple de stylisation CSS :
.texte-classique {
/* 1. font-family */
font-family: Georgia, 'Times New Roman', Times, serif;
/* 2. font-size */
font-size: 1.5rem; /* Typiquement 24px */
/* 3. font-weight */
font-weight: 700; /* Gras */
/* 4. font-style */
font-style: italic; /* Italique */
}Le HTML est évidemment très simple :
<p class="texte-classique">
Ceci est un paragraphe stylisé
</p>Pour ce résultat :
On a des équivalents Tailwind de tous ces réglages :
| Propriété CSS | Valeur | Classe tailwind | |
| font-family | serif (Georgia, etc.) | font-serif | Utilise la pile de polices Serif par défaut de Tailwind |
| font-size | 1.5rem | text-xl | Classe prédéfinie qui correspond généralement à 1.25rem ou 1.5rem selon la configuration |
| font-weight | 700 | font-bold | Texte en gras |
| font-style | italic | italic | Texte en italique |
Donc, on se retrouve avec cet équivalent pour le même résultat :
<p class="font-serif text-xl font-bold italic">
Ceci est un paragraphe stylisé
</p>Bien alignés s'il vous plaît !
L'alignement horizontal est important pour le texte. Voici un exemple en CSS classique :
.align-gauche {
text-align: left;
}
.align-droite {
text-align: right;
}
.align-centre {
text-align: center;
}
.align-justifie {
text-align: justify;
}
/* Style de conteneur pour la visibilité */
.conteneur-classique p {
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 10px;
}Voici le HTML :
<div class="conteneur-classique">
<p class="align-gauche">
Ceci est un texte aligné à gauche. C'est l'alignement par défaut dans la plupart des navigateurs occidentaux.
</p>
<p class="align-droite">
Ceci est un texte aligné à droite. Utile pour les légendes ou certaines mises en page de titres.
</p>
<p class="align-centre">
Ceci est un texte centré. Souvent utilisé pour les titres et les blocs de texte courts.
</p>
<p class="align-justifie">
Ceci est un texte justifié. Il répartit l'espace entre les mots pour que le texte touche les deux bords (gauche et droite), créant ainsi des bords bien nets.
</p>
</div>Avec ce résultat :
Voilà l'équivalent Tailwind :
<div class="space-y-3 p-4 border border-gray-300">
<p class="text-left p-2 border border-blue-200">
Ceci est un texte aligné à gauche. C'est l'alignement par défaut dans la plupart des navigateurs occidentaux.
</p>
<p class="text-right p-2 border border-blue-200">
Ceci est un texte aligné à droite. Utile pour les légendes ou certaines mises en page de titres.
</p>
<p class="text-center p-2 border border-blue-200">
Ceci est un texte centré. Souvent utilisé pour les titres et les blocs de texte courts.
</p>
<p class="text-justify leading-relaxed p-2 border border-blue-200">
Ceci est un texte justifié. Il répartit l'espace entre les mots pour que le texte touche les deux bords (gauche et droite), créant ainsi des bords bien nets.
</p>
</div>Ne vous attardez pas sur ce que j'ai ajouté pour la visibilité et restons sur l'alignement :
| Alignement | CSS classique | Classe Tailwind |
| Gauche | text-align: left; | text-left |
| Droite | text-align: right; | text-right |
| Centre | text-align: center; | text-center |
| Justifié | text-align: justify; | text-justify |
Mise en boîte
Sur une page web, on met tout en boîte en gérant des marges, des dimensions, des bordures, des couleurs...
Il faut déjà bien savoir de quoi on parle alors vite une petite illustration :
Prenons une boîte HTML :
<div class="boite-classique">
Contenu de la boîte
</div>Et on s'amuse un peu avec du CSS :
.boite-parent-classique {
/* Marge autour du parent pour l'exemple */
padding: 30px;
background-color: #f0f0f0;
}
.boite-classique {
/* 1. Dimensions */
width: 200px; /* Largeur de la zone de contenu */
height: 100px; /* Hauteur de la zone de contenu */
/* 2. Padding (Marge interne) */
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
/* Raccourci possible : padding: 20px 15px; */
/* 3. Margin (Marge externe) */
margin: 40px auto; /* 40px en haut/bas, centré (auto) horizontalement */
/* Style visuel */
background-color: #4CAF50;
color: white;
border: 4px solid #388E3C;
text-align: center;
}Et voilà le résultat :
Avec Tailwind on a :
<div class="p-8 bg-gray-100">
<div class="w-48 h-24 pt-5 pb-5 px-4 mx-auto my-10 bg-green-500 text-white border-4 border-green-700 text-center">
Contenu de la boîte
</div>
</div>| Propriété | CSS | Classe Tailwind | |
| width | 200px | w-48 | Définit la largeur de la zone de contenu (48 unités ≈ 192px, proche de 200px) |
| height | 100px | h-24 | Définit la hauteur de la zone de contenu (24 unités = 96px, proche de 100px) |
| padding-top/bottom |
padding-top: 20px; |
pt-5 pb-5 | Marge interne verticale (5 unités = 20px) |
| padding-left/right | padding-left: 15px; padding-left: 15px; |
px-4 | Marge interne horizontale (4 unités = 16px, proche de 15px) |
| margin-top/bottom | margin-top: 40px; margin-bottom: 40px; |
my-10 | Marge externe verticale (10 unités = 40px) |
| margin-left/right | margin: auto; | mx-auto | Centre la boîte horizontalement (marge gauche/droite automatique) |
Intéressons-nous maintenant plus précisément aux bordures avec un nouvel exemple :
<div class="boite-stylisee-classique">
Boîte avec bordure, fond, et coins arrondis.
</div>Avec le CSS, on peut imaginer ce genre de stylisation :
.boite-stylisee-classique {
/* 1. Couleur de fond */
background-color: #e0f2fe; /* Bleu clair */
/* 2. Bordures (couleur, style, épaisseur) */
border-width: 8px;
border-style: dotted; /* Pointillés */
border-color: #0c4a6e; /* Bleu foncé */
/* Raccourci : border: 8px dotted #0c4a6e; */
/* 3. Coins arrondis */
border-radius: 20px; /* Coins très arrondis */
/* Dimensions et texte pour la visualisation */
width: 250px;
padding: 20px;
text-align: center;
font-weight: bold;
}Ce qui n'est pas forcément du plus bel effet, mais tous les goûts sont dans la nature :
Voici la version tailwind :
<div class="bg-sky-100 border-8 border-dotted border-cyan-800 rounded-2xl w-64 p-5 font-bold text-center">
Boîte avec bordure, fond, et coins arrondis.
</div>| Propriété | CSS | classe Tailwind | |
| background-color | #e0f2fe (Bleu clair) | bg-sky-100 | Définit la couleur de fond |
| border-width | 8px | border-8 | Définit l'épaisseur de la bordure (8px) |
| border-style | dotted (Pointillés) | border-dotted | Définit le style de la bordure |
| border-color | #0c4a6e (Bleu foncé) | border-cyan-800 | Définit la couleur du trait de bordure |
| border-radius | 20px | rounded-2xl | Définit le rayon des coins arrondis (20px est proche de la valeur par défaut de rounded-2xl) |
| width | 250px | w-64 | Dimensions (64 unités ≈ 256px) |
N'hésitez pas à aller consulter la documentation de Tailwind pour explorer toutes les valeurs possibles et de jouer avec !
Mise en page "responsive"
Abordons à présent un sujet toujours un peu délicat : la mise en page. Nous sommes souvent confrontés à l'organisation visuelle des pages afin d'ordonner le contenu, quel que soit le support de visualisation, qu'il s'agisse d'un minuscule smartphone ou d'un écran géant. Je dois avouer que Tailwind est plutôt bien équipé pour ce sujet.
Avec flex
Prenons un exemple classique de boîtes qui doivent s'organiser selon la largeur de l'écran :
<div class="conteneur-flex-3d">
<div class="element-flex-3d">Boîte 1</div>
<div class="element-flex-3d">Boîte 2</div>
<div class="element-flex-3d">Boîte 3</div>
</div>Avec du CSS classique, on va faire quelque chose comme ça en utilisant @media :
/* Style par défaut (Mobile First : < 768px) - 1 colonne */
.conteneur-flex-3d {
display: flex;
flex-wrap: wrap; /* Important pour le retour à la ligne */
gap: 10px;
padding: 15px;
background-color: #fce7f3; /* Rose très clair */
}
.element-flex-3d {
width: 100%; /* Occupation pleine largeur */
padding: 20px;
text-align: center;
background-color: #ec4899; /* Rose */
color: white;
border-radius: 6px;
box-sizing: border-box; /* Important pour le calcul des dimensions */
}
/* 1. Moyen Écran (md: >= 768px) - 2 colonnes */
@media (min-width: 768px) {
.element-flex-3d {
width: calc(50% - 5px); /* 50% moins la moitié du gap */
}
}
/* 2. Grand Écran (lg: >= 1024px) - 3 colonnes */
@media (min-width: 1024px) {
.element-flex-3d {
width: calc(33.333% - 6.666px); /* 33.33% moins un tiers du gap */
}
}On aura les trois aspects selon la largeur de l'écran :
Maintenant comment on va faire avec Tailwind ? On va voir que c'est relativement plus simple, mais il y a plusieurs solutions, voici la plus directe :
<div class="flex flex-wrap gap-3 p-4 bg-pink-50">
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:w-[calc(50%-6px)] lg:w-[calc(33.333%-8px)]">Boîte 1</div>
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:w-[calc(50%-6px)] lg:w-[calc(33.333%-8px)]">Boîte 2</div>
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:w-[calc(50%-6px)] lg:w-[calc(33.333%-8px)]">Boîte 3</div>
</div>Les classes importantes ici sont md (écran moyen) et lg (écran large). Il existe aussi xl et 2xl. La classe w-full exprimant qu'on remplit la largeur.
Pour les puristes, on peut utiliser flex-grow :
<div class="flex flex-wrap gap-3 p-4 bg-pink-50">
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:flex-1 md:min-w-[calc(50%-6px)] lg:min-w-[calc(33.333%-8px)]">Boîte 1</div>
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:flex-1 md:min-w-[calc(50%-6px)] lg:min-w-[calc(33.333%-8px)]">Boîte 2</div>
<div class="w-full p-5 text-center bg-pink-500 text-white rounded-md md:flex-1 md:min-w-[calc(50%-6px)] lg:min-w-[calc(33.333%-8px)]">Boîte 3</div>
</div>La différence se trouve dans le cas de l'écran moyen où la boîte toute seule va occuper toute la largeur disponible :
Avec grid
Voyons l'application du même exemple avec grid plutôt que flex pour faire un peu de gymnastique mentale. Au niveau du HTML on change rien (à part le nom de la classe) :
<div class="conteneur-grid-3d">
<div class="element-grid">Boîte 1</div>
<div class="element-grid">Boîte 2</div>
<div class="element-grid">Boîte 3</div>
</div>Voici une possibilité pour le CSS :
/* Style par défaut (Mobile First : < 768px) - 1 colonne */
.conteneur-grid-3d {
display: grid;
/* 1 colonne d'une fraction (1fr) */
grid-template-columns: 1fr;
gap: 12px; /* Espacement entre les cellules (équivalent de gap Flexbox) */
padding: 15px;
background-color: #fce7f3;
}
.element-grid {
padding: 20px;
text-align: center;
background-color: #ec4899;
color: white;
border-radius: 6px;
}
/* 1. Moyen Écran (md: >= 768px) - 2 colonnes */
@media (min-width: 768px) {
.conteneur-grid-3d {
/* 2 colonnes égales (1fr 1fr) */
grid-template-columns: repeat(2, 1fr);
}
}
/* 2. Grand Écran (lg: >= 1024px) - 3 colonnes */
@media (min-width: 1024px) {
.conteneur-grid-3d {
/* 3 colonnes égales (1fr 1fr 1fr) */
grid-template-columns: repeat(3, 1fr);
}
}Et on retrouve le même rendu qu'avec flex. Pour Tailwind ça donne quelque chose comme ça :
<div class="grid gap-3 p-4 bg-pink-50
grid-cols-1
md:grid-cols-2
lg:grid-cols-3">
<div class="p-5 text-center bg-pink-600 text-white rounded-md">Boîte 1</div>
<div class="p-5 text-center bg-pink-600 text-white rounded-md">Boîte 2</div>
<div class="p-5 text-center bg-pink-600 text-white rounded-md">Boîte 3</div>
</div>C'est plus simple qu'avec flex, par contre, on ne peut pas avoir le même effet que flex-grow. Le résultat est plus rigide.
Variables CSS
Avec le CSS, on est souvent amené à utiliser des variables. Prenons par exemple le cas de la gestion de l'opacité pour un bouton :
<div class="boite-variables">
Boîte avec couleur définie par variable et opacité.
</div>:root {
/* Définition d'une variable CSS */
--ma-couleur-primaire: 59, 130, 246; /* Valeurs RGB pour bleu-500 */
}
.boite-variables {
/* Utilisation de la variable dans la fonction rgba() pour contrôler l'opacité */
background-color: rgba(var(--ma-couleur-primaire), 0.75); /* 75% d'opacité */
color: white;
padding: 20px;
border-radius: 8px;
width: 300px;
}
Tailwind gère l'opacité du fond ou du texte en injectant automatiquement une variable CSS dans les règles background-color ou color :
<div class="bg-blue-500 bg-opacity-75 text-white p-5 rounded-lg w-72">
Boîte avec couleur définie par classe et opacité.
</div>Conclusion
Mon but dans cet article n'était évidemment pas d'être exhaustif concernant Tailwind, qui est un outil très riche et volumineux, mais simplement de donner un aperçu de sa stratégie et de ses possibilités. La documentation officielle, c'est ici. Même si son côté verbeux rend notre HTML un peu difficile à lire, il devient incontournable, car largement adopté. N'oublions pas que c'est uniquement une façon différente de gérer le CSS, et non une collection de composants prêts à l'emploi !
Si vous souhaitez utiliser Tailwind dans le cadre d'une bibliothèque toute prête, les solutions ne manquent pas, à commencer par la célèbre Daisy.
Par bestmomo
Aucun commentaire