L'approche Utility-First
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre la philosophie utility-first
Pourquoi c'est différent du CSS classique
2. Installer Tailwind avec Vite
Setup pour projets React
3. Utiliser les classes utilitaires
Spacing, typographie, couleurs, Flexbox, Grid
4. Préfixes responsive & états
sm:, md:, lg:, hover:, focus:, group-hover:
Pourquoi Tailwind ?
Le problème du CSS classique à grande échelle
Utility-first vs Component-first
Comparaison avec BEM/CSS classique
Setup Tailwind avec Vite
Ce qu'on utilisera en React
Core utilities
Spacing, colors, typography, flex, grid, borders, shadows
Responsive & États
Préfixes sm:, md:, lg: et hover:, focus:
Live Coding
Reconstruire une landing page — comparer la vitesse vs CSS pur
Le CSS classique devient ingérable
Nommage, dead code, refactoring... les projets s'effondrent sous leur propre poids
Tailwind est le standard moderne
Utilisé par GitHub, Netflix, Shopify, et des millions de développeurs
Cette leçon vous donne les bases pour être productif immédiatement avec Tailwind
Pourquoi Tailwind ?
Le problème du CSS classique à grande échelle
En CSS classique, chaque élément a besoin d'un nom unique
CSS classique (BEM)
<div class="card">
<h2 class="card__title">...</h2>
<p class="card__description">...</p>
<button class="card__button--primary">
</div>
Inventer des noms = temps perdu
Tailwind
<div class="p-4 rounded-lg shadow">
<h2 class="text-xl font-bold">...</h2>
<p class="text-slate-600 mt-2">...</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded">
</div>
Pas de noms = pas de problèmes
Le problème
La solution Tailwind
Au lieu d'écrire du CSS personnalisé, composez avec des classes prédéfinies
/* CSS classique */
.btn-primary {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
<button class="btn-primary">Click</button>
/* Tailwind - pas de CSS Ă Ă©crire */
<button class="bg-blue-500 text-white px-4 py-2 rounded">Click</button>
C'est l'erreur n°1 des débutants — comprendre la différence
Inline style (mauvais)
<div style="padding: 16px; color: #333;">
Tailwind (abstrait)
<div class="p-4 text-slate-700">
Clé : p-4 = 1rem = 16px (pas 4px !)
Le fichier CSS final est minuscule
3MB+
Tailwind complet
(toutes les classes)
→
Purge
(production build)
~10KB
CSS final
(classes utilisées uniquement)
Comment ? Tailwind scanne vos fichiers HTML/JSX et garde uniquement les classes utilisées
Utility-first vs Component-first
Deux philosophies, deux approches
BEM + CSS
/* CSS */
.card { padding: 1rem; }
.card__title { font-size: 1.25rem; }
.card--featured { border: 2px solid blue; }
<div class="card card--featured">
<h3 class="card__title">...</h3>
</div>
Tailwind
/* Pas de CSS */
<div class="p-4 border-2 border-blue-500">
<h3 class="text-xl font-semibold">...</h3>
</div>
Vitesse de développement
Pas d'allers-retours entre HTML et CSS
Cohérence visuelle
Design system intégré
Maintenance facile
Styles locaux, pas d'effets de bord
Responsive natif
Préfixes intégrés (sm:, md:, lg:)
Tailwind (utility-first)
CSS classique
Avant de critiquer Tailwind, essayez-le sur un vrai projet
Les développeurs qui résistent à Tailwind n'ont souvent pas compris le problème qu'il résout
Conseil : Faites 2-3 projets avec Tailwind avant de juger
Setup Tailwind avec Vite
Ce qu'on utilisera en React
# Installer Tailwind et le plugin Vite
npm install tailwindcss @tailwindcss/vite
Le package @tailwindcss/vite est le plugin officiel pour Vite
Tailwind v4 : Plus besoin de PostCSS ni de tailwind.config.js séparé !
Ajouter le plugin Tailwind dans vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
Simple : Une seule ligne Ă ajouter dans les plugins !
Une seule ligne suffit avec Tailwind v4
/* src/index.css */
@import "tailwindcss";
Avant (v3)
@tailwind base;
@tailwind components;
@tailwind utilities;
Maintenant (v4)
@import "tailwindcss";
Une seule ligne !
// Dans un composant React
<h1 class="text-3xl font-bold text-blue-500">
Hello Tailwind!
</h1>
# Lancer le serveur de développement
npm run dev
Si le texte est bleu et en gras, Tailwind fonctionne !
Core Utilities
Spacing, colors, typography, flex, grid, borders, shadows
p-4
padding: 1rem = 16px
m-4
margin: 1rem = 16px
gap-4
gap: 1rem = 16px
Valeurs courantes
p-1 = 4px (0.25rem)
p-2 = 8px (0.5rem)
p-3 = 12px (0.75rem)
p-4 = 16px (1rem)
p-6 = 24px (1.5rem)
p-8 = 32px (2rem)
Attention : p-4 = 16px, PAS 4px !
px-4
padding-left + padding-right
py-4
padding-top + padding-bottom
pt-4, pb-4, pl-4, pr-4
Une direction spécifique
MĂŞme logique pour margin :
mx-auto → margin: auto (centrer)
my-4 → margin-top + margin-bottom
mt-8 → margin-top uniquement
Taille
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-4xl
Poids
font-light
font-normal
font-medium
font-semibold
font-bold
Alignement
text-left
text-center
text-right
text-justify
Line height
leading-tight → line-height: 1.25
leading-normal → line-height: 1.5
leading-relaxed → line-height: 1.625
Palette intégrée avec échelles de 50 à 950
slate
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
/* Utilisation */
text-blue-500 → color: #3b82f6
bg-blue-500 → background-color: #3b82f6
border-blue-500 → border-color: #3b82f6
flex
display: flex
flex-col
flex-direction: column
items-center
align-items: center
justify-between
justify-content: space-between
justify-center
justify-content: center
gap-4
gap: 1rem
flex-1
flex: 1 1 0%
flex-wrap
flex-wrap: wrap
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
grid-cols-*
grid-template-columns: repeat(n, 1fr)
grid-cols-1, 2, 3, 4, 5, 6...
col-span-*
grid-column: span n / span n
col-span-2 → occupe 2 colonnes
Borders
border → border-width: 1px
border-2 → border-width: 2px
rounded → border-radius: 0.25rem
rounded-lg → border-radius: 0.5rem
rounded-full → border-radius: 9999px
Shadows
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
Largeur
w-full → width: 100%
w-1/2 → width: 50%
w-64 → width: 16rem (256px)
w-screen → width: 100vw
max-w-lg → max-width: 32rem
Hauteur
h-full → height: 100%
h-screen → height: 100vh
h-64 → height: 16rem (256px)
min-h-screen → min-height: 100vh
<div class="p-6 bg-white rounded-lg shadow-lg border border-slate-200">
<img class="w-full h-48 object-cover rounded-t-lg" src="..." />
<h3 class="text-xl font-bold text-slate-900 mt-4">Titre</h3>
<p class="text-slate-600 mt-2">Description...</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
En savoir plus
</button>
</div>
Ce tableau s'applique Ă TOUTES les utilities : p-*, m-*, w-*, h-*, gap-*, etc.
1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
La formule
nombre × 4px = valeur réelle
p-4 → 4 × 4px = 16px
Exemples concrets
p-8 = 32px de padding
m-6 = 24px de margin
w-16 = 64px de largeur
Responsive avec Tailwind
Mobile-first avec les préfixes sm:, md:, lg:
Ajouter un préfixe pour cibler une taille d'écran minimale
Les styles sans préfixe s'appliquent à TOUTES les tailles
<div class="text-sm md:text-base lg:text-lg">
Mobile (<768px)
text-sm
md (≥768px)
text-base
lg (≥1024px)
text-lg
Exactement comme nos media queries min-width !
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-4 bg-slate-100 rounded">Card 1</div>
<div class="p-4 bg-slate-100 rounded">Card 2</div>
<div class="p-4 bg-slate-100 rounded">Card 3</div>
</div>
Mobile
1 colonne
md (768px+)
2 colonnes
lg (1024px+)
3 colonnes
L'ordre dans le HTML n'a pas d'importance, seul le breakpoint compte
Les deux fonctionnent
class="text-sm md:text-base"
class="md:text-base text-sm"
Même résultat — md: gagne à partir de 768px
Pourquoi ?
Tailwind génère le CSS dans un ordre fixe. md: vient TOUJOURS après les styles de base.
Variantes d'Ă©tat
hover:, focus:, active:, group-hover:
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 active:bg-blue-700">
Cliquez-moi
</button>
hover:
Au survol de la souris
focus:
Quand l'élément a le focus
active:
Pendant le clic
Modifier un enfant quand le parent est survolé
<div class="group p-4 bg-white rounded-lg">
<h3 class="text-slate-900">Titre</h3>
<p class="text-slate-600 group-hover:text-blue-500">Description</p>
</div>
group
Ajouter sur le parent
group-hover:
Utiliser sur l'enfant
Modifier le parent quand un enfant a le focus
<div class="p-2 border focus-within:border-blue-500 focus-within:ring-2">
<input class="w-full outline-none" />
</div>
La bordure devient bleue quand l'input à l'intérieur a le focus
Live Coding
Reconstruire une landing page avec Tailwind
Header
Logo + Navigation
Hero
Titre + CTA
Features
3 cartes en grille
<div class="min-h-screen flex flex-col">
<header>...</header>
<main class="flex-1">...</main>
</div>
<header class="bg-white shadow-sm">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-xl font-bold text-blue-600">Logo</div>
<nav class="flex gap-6">
<a href="#" class="text-slate-600 hover:text-blue-600">Accueil</a>
<a href="#" class="text-slate-600 hover:text-blue-600">Services</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Contact</a>
</nav>
</div>
</header>
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
<div class="max-w-6xl mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Bienvenue sur notre site</h1>
<p class="text-xl mb-8 text-blue-100">La solution pour vos projets</p>
<button class="px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50">
Commencer maintenant
</button>
</div>
</section>
<section class="py-16 bg-slate-50">
<div class="max-w-6xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Nos services</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-6 bg-white rounded-lg shadow-md">...</div>
<div class="p-6 bg-white rounded-lg shadow-md">...</div>
<div class="p-6 bg-white rounded-lg shadow-md">...</div>
</div>
</div>
</section>
CSS pur + BEM
Tailwind
2x plus rapide avec Tailwind !
Pièges courants
Ce que les Ă©tudiants font mal
C'est la réaction n°1 des débutants
La réaction
class="p-4 bg-white rounded-lg shadow-md border border-slate-200 hover:shadow-lg transition-shadow duration-200"
"Trop de classes ! C'est illisible !"
La réalité
Conseil : Installez l'extension Tailwind CSS IntelliSense pour VS Code
p-4 ne veut PAS dire 4 pixels !
L'erreur
// "p-4, ça fait 4px, non ?"
// NON !
La réalité
p-4 = 1rem = 16px
// L'échelle est multipliée par 4
Mémorisez : Le chiffre est le multiplicateur de l'unité de base (4px)
p-4 = 4 Ă— 4px = 16px | p-6 = 6 Ă— 4px = 24px | p-8 = 8 Ă— 4px = 32px
Les étudiants veulent changer les couleurs dès le premier jour
Ce qu'ils veulent faire
// Modifier tailwind.config.js
theme: {
extend: {
colors: {
brand: '#ff6b6b'
}
}
}
Ce qu'ils devraient faire
Règle : Gardez la personnalisation pour demain. Aujourd'hui, maîtrisez les defaults.
Sans l'extension VS Code, Tailwind est pénible
Sans extension
Avec l'extension
Installez : Tailwind CSS IntelliSense dans VS Code
Tailwind n'est PAS du inline style
Classes abstraites avec design system intégré
Le fichier CSS final est minuscule
Purge automatique (tree-shaking) en production
Les préfixes responsive sont mobile-first
sm:, md:, lg: = exactement comme min-width
Accepter la philosophie avant de la critiquer
Essayez 2-3 projets avant de juger
p-4 = 16px
Pas 4px !
Mobile-first
Base = mobile
hover: focus:
États natifs
Installez l'extension
VS Code IntelliSense
Documentation officielle
tailwindcss.com
VS Code Extension
Tailwind CSS IntelliSense
Tailwind UI
Composants prĂŞts Ă l'emploi (payant)
Tailwind Play
play.tailwindcss.com — Testez en ligne
Tailwind CSS — L'approche Utility-First
Prochaine Ă©tape : Pratiquez avec la landing page !