Maîtrisez le framework CSS utility-first le plus populaire
Tailwind CSS est un framework CSS utility-first créé par Adam Wathan en 2017. Contrairement à Bootstrap ou Foundation qui fournissent des composants prêts à l'emploi, Tailwind offre des classes utilitaires de bas niveau qui vous permettent de construire des designs entièrement personnalisés directement dans votre HTML.
💡 La philosophie utility-first en un exemple :
Plus besoin de switcher entre HTML et CSS. Tout se fait dans le markup.
Palette de couleurs, espacements, typographie cohérents prêts à l'emploi.
Les breakpoints sm:, md:, lg: font partie intégrante du framework.
Purge automatique : seul le CSS utilisé est inclus (finis les 200KB de Bootstrap !)
📊 Statistiques 2024 : Tailwind CSS est utilisé par plus de 70% des nouveaux projets React/Vue/Angular et alimente les designs de Vercel, Stripe, Shopify, et GitHub.
| Critère | Tailwind CSS | Bootstrap | Styled Components |
|---|---|---|---|
| Approche | Utility-first | Component-first | CSS-in-JS |
| Taille bundle | ~10KB (purged) | ~200KB | Variable |
| Personnalisation | Illimitée | Limitée (override) | Illimitée |
| Courbe d'apprentissage | Moyenne | Douce | Moyenne |
| Dark Mode | Natif | Manuel | Possible |
Le plus rapide pour démarrer, parfait pour cette formation :
Créons une carte de profil stylisée, entièrement avec des classes Tailwind :
Développeuse Front-end
🔍 Analysons le code :
• max-w-sm : largeur max 384px
• mx-auto : centrage horizontal
• hover:shadow-2xl : effet au survol
• transition-all duration-300 : animation fluide
Créez un bouton "S'inscrire" avec Tailwind qui doit :
1. Avoir un fond violet (purple-600)
2. Du padding horizontal 6 et vertical 3
3. Des coins arrondis (rounded-lg)
4. Un effet de survol qui assombrit le fond
5. Une ombre portée qui s'intensifie au survol
Chaque classe Tailwind fait UNE chose et la fait bien. Au lieu d'écrire du CSS personnalisé, vous composez votre design en empilant des classes prédéfinies directement dans le HTML.
✨ Avantage majeur : Pas besoin de nommer vos classes, pas de conflits CSS, et surtout : vous ne quittez jamais votre fichier HTML !
Tailwind fournit des classes pour tous les types de layout modernes :
Flexbox (display: flex)
Démonstration : Centre un élément parfaitement
<div class="flex justify-center items-center h-screen">
Grid (display: grid)
Tailwind utilise une échelle de spacing cohérente basée sur 0.25rem (4px) :
p-0
0px
p-1
4px (0.25rem)
p-2
8px (0.5rem)
p-4
16px (1rem)
p-6
24px (1.5rem)
p-8
32px (2rem)
p-12
48px (3rem)
p-16
64px (4rem)
Palette de couleurs complète avec 10 niveaux d'intensité (50, 100, 200... 900) :
Tailles de texte
text-xs (12px) - Extra small
text-sm (14px) - Small
text-base (16px) - Base
text-lg (18px) - Large
text-xl (20px) - Extra large
text-2xl (24px) - 2X Large
text-4xl (36px) - 4X Large
Styles de texte
font-bold
italic
underline
text-center
uppercase
line-through
Recréez cette carte de prix en utilisant uniquement des classes Tailwind :
• Titre "Pro" en gras, centré, texte violet
• Prix "29€/mois" en très gros caractères
• Liste de 3 fonctionnalités avec icônes check vertes
• Bouton "Choisir" violet avec effet de survol
• Ombre, bordure arrondie, padding généreux
Tailwind adopte l'approche Mobile-First par défaut. Cela signifie que vous concevez d'abord pour le mobile, puis vous ajoutez des améliorations pour les écrans plus larges. Cette méthode est recommandée par Google et améliore les performances.
💡 Règle d'or : Les styles sans préfixe (ex: text-base)
s'appliquent à TOUS les écrans. Les préfixes (sm:, md:, lg:) ajoutent des règles À PARTIR de cette taille.
Mobile (défaut)
< 640px - Styles de base sans préfixe
Small
≥ 640px (petits téléphones paysage)
Medium
≥ 768px (tablettes portrait)
Large
≥ 1024px (tablettes paysage / laptops)
Extra Large
≥ 1280px (desktops)
🎨 Grille responsive évolutive
📐 Navigation qui se transforme
📏 Espacements adaptatifs
Tailwind fournit des classes container avec largeurs max adaptées :
| Breakpoint | Largeur max container |
|---|---|
| Default | 100% (pleine largeur) |
| sm (640px) | 640px |
| md (768px) | 768px |
| lg (1024px) | 1024px |
| xl (1280px) | 1280px |
| 2xl (1536px) | 1536px |
🔧 Toutes les classes peuvent être préfixées :
md:hover:bg-blue-500 → Bleu au survol uniquement sur md+
lg:focus:ring-2 → Ring au focus uniquement sur lg+
sm:dark:bg-slate-800 → Dark mode uniquement sur sm+
Créez un layout de galerie photo responsive :
• Sur mobile : 1 colonne, images pleine largeur
• Sur tablette (md) : 2 colonnes avec gap-4
• Sur desktop (lg) : 3 colonnes avec gap-6
• Sur grand écran (xl) : 4 colonnes avec gap-8
• Ajoutez des coins arrondis qui augmentent avec la taille d'écran
• Les images doivent passer de 200px à 300px de hauteur
Le mode sombre n'est plus une option de luxe. En 2024, plus de 80% des utilisateurs s'attendent à ce que vos applications le supportent. Il réduit la fatigue oculaire, économise la batterie sur les écrans OLED, et donne un aspect moderne à votre design.
Moins de fatigue oculaire dans les environnements sombres ou le soir.
Jusqu'à 60% d'économie sur les écrans OLED/AMOLED.
Tailwind offre 3 stratégies pour le dark mode :
Vous contrôlez le mode via une classe sur le HTML (bouton toggle).
Suit automatiquement les préférences système de l'utilisateur.
Préfixez n'importe quelle classe avec dark: pour qu'elle s'applique en mode sombre :
🎨 Exemple complet : Carte adaptative
Voici le JavaScript pour basculer entre les modes :
💡 Explication : La classe dark sur l'élément
<html> active automatiquement toutes les classes préfixées par
dark: dans votre CSS Tailwind.
Associations classiques pour un dark mode élégant :
🌙 Mode Clair
🌑 Mode Sombre
Créez une navbar responsive avec dark mode :
• Fond blanc en clair, slate-900 en sombre
• Texte adaptatif (foncé/blanc selon le mode)
• Logo et 3 liens de navigation
• Bouton toggle 🌞/🌙 pour changer le mode
• Le choix doit être sauvegardé dans localStorage
• Responsive : menu hamburger sur mobile
Quand vous réutilisez les mêmes classes Tailwind sur plusieurs éléments,
@apply vous permet de créer des composants CSS réutilisables
tout en gardant les avantages de Tailwind.
⚠️ Bonne pratique : N'abusez pas de @apply ! Gardez-la pour les composants réutilisables (boutons, cartes, formulaires). Pour les layouts uniques, utilisez directement les classes Tailwind dans le HTML.
Tailwind est entièrement configurable. Voici les extensions les plus courantes :
🎨 Ajouter des couleurs personnalisées
→ Utilisation : bg-brand-500 text-brand-900
📐 Customiser les breakpoints
✨ Ajouter des animations
→ Utilisation : animate-fade-in animate-bounce-slow
@tailwindcss/forms
PopulaireReset et styles de base pour tous les éléments de formulaire.
@tailwindcss/typography
BlogStyles typographiques magnifiques pour le contenu HTML (articles, docs).
@tailwindcss/aspect-ratio
Contrôle précis des ratios d'aspect pour images et vidéos.
@tailwindcss/line-clamp
Troncage de texte avec ellipsis après X lignes.
Tailwind utilise PurgeCSS pour supprimer automatiquement le CSS non utilisé :
📦 Build pour production
📚 Documentation officielle
tailwindcss.com - La référence complète avec tous les exemples.
🎨 Tailwind UI
Bibliothèque de composants premium (payante) par les créateurs de Tailwind.
🔍 Tailwind Components
tailwindcomponents.com - Composants gratuits faits par la communauté.
🎭 Headless UI
Composants accessibles (dropdowns, modals) sans styles, par Tailwind Labs.
Mettez en pratique tout ce que vous avez appris :
• Créez un dashboard responsive avec sidebar (lg:flex, mobile:hidden)
• Utilisez @apply pour créer des composants réutilisables
• Ajoutez un toggle dark mode avec localStorage
• Personnalisez la config avec vos propres couleurs brand
• Intégrez un graphique/statistiques stylisé
• Tableau de données responsive avec scroll horizontal sur mobile
• Cartes KPI avec icônes et animations au hover