Qu’est-ce que Tailwind CSS ?
Tailwind CSS est un framework CSS dit utility-first. Au lieu de vous fournir des composants préfabriqués (comme Bootstrap avec ses .btn, .card, .navbar), Tailwind vous donne des centaines de petites classes utilitaires que vous combinez directement dans votre HTML pour construire n’importe quel design.
/* styles.css */
.bouton-principal {
background-color: #3b82f6;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 700;
}<button class="bg-blue-500
text-white px-6 py-3
rounded-lg font-bold">
Cliquez ici
</button>Au début, écrire bg-blue-500 text-white px-6 py-3 rounded-lg font-bold directement dans le HTML peut sembler étrange. Mais très vite, vous réalisez que c’est incroyablement productif : pas de fichier CSS à maintenir, pas de naming de classes à inventer, pas de conflits de spécificité.
Avec Tailwind, vous ne pensez plus « je vais créer une classe .card-produit« . Vous pensez « je veux un fond blanc, une bordure grise, des coins arrondis, un peu de padding ». Chaque décision de style est visible directement dans le HTML.
Méthode 1 : Installation via CDN (débutants)
La façon la plus rapide de tester Tailwind : coller une balise <script> dans votre HTML. Idéal pour apprendre et expérimenter, à ne pas utiliser en production.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier projet Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-8">
<div class="max-w-lg mx-auto bg-white rounded-2xl shadow-lg p-8">
<h1 class="text-3xl font-bold text-gray-900 mb-4">
Bonjour Tailwind !
</h1>
<p class="text-gray-600 leading-relaxed mb-6">
Mon premier composant avec Tailwind CSS.
</p>
<button class="bg-blue-600 text-white px-6 py-3
rounded-xl font-semibold
hover:bg-blue-700 transition-colors">
Commencer
</button>
</div>
</body>
</html>Le CDN de Tailwind charge toutes les classes possibles (~3MB). En production, l’installation npm génère uniquement les classes que vous utilisez vraiment (souvent <10kb).
Méthode 2 : Installation via npm (projet réel)
Pour un vrai projet, on installe Tailwind comme dépendance npm. Cela active le processus de purge : seules les classes utilisées dans votre code sont incluses dans le fichier CSS final.
# 1. Initialiser le projet
npm init -y
# 2. Installer Tailwind + PostCSS + Autoprefixer
npm install -D tailwindcss postcss autoprefixer
# 3. Générer tailwind.config.js et postcss.config.js
npx tailwindcss init -ptailwind.config.js : déclarer les fichiers à scanner
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// Tailwind scanne ces fichiers pour trouver les classes utilisées
"./src/**/*.{html,js,jsx,ts,tsx,vue}",
"./index.html",
],
theme: {
extend: {
// Vos personnalisations ici (cours 11)
},
},
plugins: [],
};Fichier CSS d’entrée
/* Ces 3 directives importent les styles de base de Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;# Mode watch (recompile à chaque sauvegarde)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# Build production minifié
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minifyLes classes utilitaires : logique de nommage
Chaque classe Tailwind correspond à une ou plusieurs propriétés CSS. La convention est cohérente et intuitive une fois intériorisée :
p-4 → padding: 1rem (16px)
px-4 → padding-left: 1rem; padding-right: 1rem
py-2 → padding-top: 0.5rem; padding-bottom: 0.5rem
mx-auto → margin-left: auto; margin-right: auto
text-sm → font-size: 0.875rem (14px)
text-3xl → font-size: 1.875rem (30px)
font-bold → font-weight: 700
bg-blue-500 → background-color: #3b82f6
text-white → color: #ffffff
text-gray-700 → color: #374151
rounded-lg → border-radius: 0.5rem
rounded-full → border-radius: 9999px
shadow-lg → box-shadow: (grande ombre)
w-full → width: 100%
h-12 → height: 3rem (48px)Votre premier composant : une carte produit
<div class="max-w-sm bg-white rounded-2xl
shadow-md overflow-hidden
border border-gray-100
hover:shadow-xl transition-shadow duration-300">
<!-- Image -->
<img src="image.jpg" alt="Produit"
class="w-full h-48 object-cover"/>
<div class="p-6">
<!-- Badge -->
<span class="inline-block bg-blue-100 text-blue-800
text-xs font-semibold px-3 py-1 rounded-full mb-3">
Nouveauté
</span>
<h2 class="text-xl font-bold text-gray-900 mb-2">Nom du produit</h2>
<p class="text-gray-500 text-sm leading-relaxed mb-4">
Une courte description.
</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900">29,99 €</span>
<button class="bg-blue-600 text-white px-5 py-2.5
rounded-xl font-semibold text-sm
hover:bg-blue-700 active:scale-95 transition-all">
Ajouter au panier
</button>
</div>
</div>
</div>object-cover = l’image remplit son conteneur sans se déformer. active:scale-95 = le bouton se réduit légèrement au clic (effet « press »). transition-all = toutes les propriétés animables sont interpolées.
L’échelle de valeurs Tailwind
Tailwind utilise une échelle numérique basée sur des multiples de 0,25rem (4px). Quand vous maîtrisez cette échelle, vous stylisez sans jamais avoir besoin d’ouvrir un fichier CSS :
1 → 4px | 2 → 8px | 3 → 12px
4 → 16px | 5 → 20px | 6 → 24px
8 → 32px | 10 → 40px | 12 → 48px
16 → 64px | 20 → 80px | 24 → 96pxInstallez l’extension Tailwind CSS IntelliSense. Elle affiche l’autocomplétion des classes, la valeur CSS réelle au survol, et met en évidence les erreurs. Absolument indispensable.
Exercice pratique
- Un fond de page gris clair :
bg-gray-100 min-h-screen p-8 - Un conteneur centré max 600px :
max-w-xl mx-auto - Un titre en blanc sur fond bleu marine :
bg-slate-800 text-white p-6 rounded-t-2xl - Une zone blanche en dessous :
bg-white p-6 rounded-b-2xl shadowavec texte gris - Un bouton vert en bas à droite :
bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600