Module WEB 3

Intégration Avancée avec Tailwind (5 Séances de 2h)

BUT MMI

Bienvenue dans le cursus Tailwind CSS

Ce cursus structuré en 5 cours de 2 heures a pour but de faire évoluer vos compétences d'intégration depuis l'approche par composants figés (Bootstrap) vers l'autonomie totale et le sur-mesure (Tailwind CSS), complété par l'utilisation éthique et productive de l'IA.

Objectifs Généraux du Cursus

Maîtrise Utility-First Comprendre et assembler la logique des classes atomiques sans surcharger le code source.
Flexibilité Layout & Responsive Concevoir des interfaces adaptatives complexes (Mobile-first, Dark mode) sans media queries manuelles.
Synergie IA & Prompting Utiliser les générateurs d'UI génératives (v0, Claude) en sachant auditer et refactoriser le code produit.
Autonomie en Production Être capable de livrer une landing page professionnelle sous contraintes de temps et de maquette.
Cours 1 (2 heures)

De Bootstrap à Tailwind CSS

Objectifs de la séance

  • Comprendre la rupture de paradigme entre l'approche par composants figés et l'approche par utilitaires atomiques (Utility-First).
  • Maîtriser le fonctionnement des échelles de tailles basées sur le système REM et le nuancier standardisé de Tailwind.
  • Assimiler le concept du compilateur JIT (Just-In-Time) et l'importance de la configuration de base.
  • Réaliser la migration complète et autonome d'un composant hérité sans écrire une seule ligne de CSS traditionnel.

1. Introduction théorique : Pourquoi dépasser Bootstrap ?

Jusqu'à présent, vos interfaces reposaient sur des frameworks de composants pré-stylisés comme Bootstrap. Cette approche est confortable : vous appliquez les classes .btn .btn-primary ou .card, et le framework injecte un design clé en main.

Cependant, cette structure présente des limites architecturales majeures en production :

  • La prison du design imposé : Dès que le cahier des charges s'écarte des maquettes standard du framework, vous devez créer une feuille de style externe pour forcer le code. Vous vous retrouvez à surcharger des classes imbriquées à coups de sélecteurs hyper-spécifiques ou de directives !important. Votre CSS devient lourd, difficile à maintenir, et sujet aux régressions visuelles.
  • Le poids mort (Dead Code) : Même si vous n'utilisez que 10% des composants de Bootstrap, l'intégralité de la feuille de style est chargée par le navigateur de vos utilisateurs, pénalisant les performances et les scores d'optimisation (Core Web Vitals).
  • Uniformité visuelle : Sans une refonte lourde des variables Sass, tous les sites construits sous Bootstrap partagent la même identité visuelle générique.

La solution Tailwind CSS : Le paradigme "Utility-First"
Tailwind CSS ne fournit **aucun composant graphique préconçu**. Il n'y a pas de classe pour une barre de navigation, ni pour un accordéon. À la place, il met à votre disposition un catalogue de milliers de classes utilitaires atomiques. Chaque classe n'exécute qu'une seule et unique tâche CSS (ex: ajouter un padding, modifier une couleur de fond, définir une grille flex).

L'assemblage visuel s'effectue directement au sein de votre fichier HTML. Vous concevez votre design sur mesure en combinant ces briques élémentaires, sans jamais quitter votre code HTML et sans accumuler de fichiers CSS superflus.

Documentation Officielle

Explorez la philosophie Utility-First et les concepts fondamentaux directement sur le site de Tailwind CSS.

Documentation Utility-First →
Approche Composant (Bootstrap)
<!-- Syntaxe opaque cachant le CSS réel -->
<button class="btn btn-danger">
  Supprimer
</button>
Approche Utilitaire (Tailwind CSS)
<!-- Syntaxe transparente et sur-mesure -->
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded shadow hover:bg-red-600 transition">
  Supprimer
</button>

2. Guide de Référence : Métriques et Nomenclature

Pour concevoir vos interfaces efficacement, vous devez assimiler la logique de dimensionnement rigoureuse de Tailwind CSS.

A. L'échelle des espacements et des tailles

Toutes les dimensions de marges (m-), de paddings (p-), de largeurs (w-) et de hauteurs (h-) reposent sur un multiplicateur strict basé sur le système REM.

Règle mathématique absolue :
1 unité Tailwind = 0.25rem. Sur la configuration standard des navigateurs (où 1rem = 16px), 1 unité Tailwind = 4px.
  • p-4 : Un padding interne appliqué aux 4 côtés équivalent à $4 \times 4\text{px} = 16\text{px}$ (ou $1\text{rem}$).
  • mb-3 : Une marge inférieure (*margin-bottom*) de $3 \times 4\text{px} = 12\text{px}$ (ou $0.75\text{rem}$).
  • py-2.5 : Un padding sur l'axe vertical uniquement (haut et bas) de $2.5 \times 4\text{px} = 10\text{px}$.
  • px-6 : Un padding sur l'axe horizontal uniquement (gauche et droite) de $6 \times 4\text{px} = 24\text{px}$.

📋 Liste complète de l'échelle des espacements (Padding, Margin, Gaps, Width, Height).

Doc Spacing →

B. Le système chromatique standardisé

Tailwind intègre un nuancier sophistiqué. Chaque palette de couleur (slate, gray, zinc, red, orange, amber, emerald, blue, indigo, violet, pink...) est divisée en 11 nuances numériques d'intensité lumineuse décroissante :

50 (Pastel)
100
200
300
400
500 (Base)
600
700
800
900
950 (Sombre)

Pour appliquer une couleur, spécifiez son rôle d'usage : bg-gray-100 pour un arrière-plan, text-indigo-600 pour la couleur du texte, et border-emerald-300 pour une bordure.

🎨 Visualisez le nuancier complet et apprenez à manipuler les couleurs par défaut.

Doc Palette de Couleurs →

C. Typographie, Bordures et Effets d'état

La gestion typographique s'affranchit des pixels via des utilitaires dédiés : text-xs, text-sm, text-base, text-lg jusqu'à text-9xl. L'épaisseur se contrôle par font-light, font-semibold, ou font-black.

Les rayons de courbure (*border-radius*) se déploient via les classes rounded-sm, rounded-lg, rounded-2xl ou rounded-full pour les éléments circulaires. Les ombres portées (*box-shadow*) utilisent l'échelle shadow-sm, shadow-md, shadow-xl.

Pour gérer l'interactivité au survol de la souris, il suffit d'ajouter le préfixe hover: devant n'importe quelle classe utilitaire. Exemple : bg-indigo-500 hover:bg-indigo-600 transition permet d'assombrir de manière fluide l'arrière-plan du bouton au survol.

✨ Apprenez à utiliser les pseudo-classes : hover, focus, active et bien d'autres.

Doc Hover & Pseudo-classes →

3. Architecture technique : Le moteur Just-In-Time (JIT)

Pour ce premier cours, nous intégrons Tailwind CSS à l'aide d'un script CDN chargé dans l'en-tête HTML. En production, cette méthode est proscrite. Tailwind s'appuie sur un compilateur Node.js doté d'un moteur Just-In-Time (JIT).

Ce moteur scanne vos fichiers HTML et JavaScript en temps réel à la recherche des classes utilitaires écrites dans vos balises. Il génère ensuite à la volée un fichier CSS optimisé contenant uniquement les règles réellement appelées sur votre site. Si votre projet HTML ne contient que 15 classes Tailwind distinctes, votre fichier CSS final ne pèsera que quelques octets, assurant une vitesse d'affichage maximale.

Starter-Kit d'apprentissage - index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Séance 1 - Hello Tailwind</title>
    <!-- Chargement du moteur Tailwind via CDN pour l'apprentissage -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <!-- Premier conteneur d'essai -->
    <div class="bg-white p-8 rounded-2xl shadow-xl max-w-sm text-center">
        <h1 class="text-3xl font-black text-indigo-600 mb-3">Hello Tailwind !</h1>
        <p class="text-gray-500 text-sm mb-6">On oublie Bootstrap, on reprend le contrôle.</p>
        <button class="bg-indigo-500 text-white font-semibold py-2.5 px-6 rounded-xl hover:bg-indigo-600 transition">
            Propulser
        </button>
    </div>
</body>
</html>

4. Exercice Pratique : Le Défi "Clone Express"

Pour valider vos compétences, vous devez effectuer la refonte technique complète d'un élément d'interface hérité. Le client vous fournit un bloc de code structuré avec les composants natifs de Bootstrap. Votre mission est de reconstruire intégralement cette carte visuelle en utilisant **uniquement les classes utilitaires de Tailwind CSS**, tout en modernisant ses propriétés pour obtenir un rendu premium et contemporain.

Code source Bootstrap fourni (À NE PAS MODIFIER)

<!-- CODE SOURCE BOOTSTRAP À TRANSCRIRE -->
<div class="card" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=500&q=80" class="card-img-top" alt="Maison">
  <div class="card-body">
    <span class="badge bg-secondary">Logement entier</span>
    <h5 class="card-title" style="margin-top: 10px;">Villa d'architecte - Piscine</h5>
    <p class="card-text text-muted">Aix-en-Provence, France</p>
    <p class="card-text"><strong>180 €</strong> / nuit</p>
    <a href="#" class="btn btn-primary w-100">Réserver maintenant</a>
  </div>
</div>

Spécifications et Cahier des charges graphiques :

  • L'Image : Doit occuper toute la largeur disponible, présenter une hauteur fixe contrainte (h-48) et utiliser un ajustement parfait de type object-cover pour éviter toute distorsion.
  • Le Conteneur Global : Largeur maximale maîtrisée (max-w-sm), fond blanc pur, bordure fine gris clair, et une ombre portée subtile (shadow-md) pour créer un effet de profondeur. L'arrondi global doit être prononcé (rounded-2xl) et les débordements de l'image masqués proprement (overflow-hidden).
  • Le Badge : Abandonnez le gris Bootstrap. Créez un badge premium doté d'un arrière-plan rose très clair (bg-pink-50), d'un texte rose soutenu (text-pink-700), entièrement en capitales avec un espacement de lettres élargi (tracking-wider).
  • Le Prix : La valeur monétaire "180 €" doit être mise en avant de manière impactante (text-xl font-extrabold). La mention "/ nuit" doit rester adjacente, discrète et grisée.
  • Le Bouton : Remplacer le bleu générique par un bouton au design "Tech" moderne : arrière-plan noir ou gris très sombre (bg-gray-900), angles bien adoucis, texte blanc centré. Au survol de la souris, sa couleur doit s'éclaircir de manière fluide (hover:bg-gray-800 transition duration-200).
Rendu Visuel Attendu (Exemple Cible)
Villa
Logement entier
Villa d'architecte - Piscine

Aix-en-Provence, France

180 € / nuit

Réserver maintenant

🔒 Verrou pédagogique : Accéder à la correction validée

Saisissez le mot de passe fourni par l'enseignant en fin de session pour débloquer le code source optimisé et valider vos alignements.

Cours 2 (2 heures)

Responsive Multi-Écrans & Architecture Dark Mode

Objectifs de la séance

  • Assimiler la méthodologie Mobile-First et comprendre pourquoi les max-width traditionnels sont abandonnés.
  • Maîtriser les 5 breakpoints natifs de Tailwind CSS et savoir orchestrer les changements de mise en page.
  • Comprendre le fonctionnement mécanique du sélecteur de mode sombre (`dark:`) au niveau du DOM.
  • Concevoir un composant hautement adaptatif ("caméléon") qui s'ajuste en géométrie et en palette colorimétrique.

1. L'intégration Mobile-First : Le standard de l'industrie

Dans le développement web moderne, plus de la moitié du trafic mondial s'effectue sur smartphone. L'intégration Mobile-First n'est pas qu'une préférence ergonomique, c'est une exigence technique. Elle consiste à concevoir d'abord l'interface pour le plus petit écran disponible, puis à y ajouter des règles d'agrandissement et d'enrichissement pour les écrans plus larges.

Tailwind CSS applique cette philosophie de manière stricte et native. Toutes les classes que vous écrivez sans préfixe s'appliquent sur mobile ($375\text{px}$ et moins) et se propagent vers le haut par héritage, jusqu'à ce qu'un breakpoint supérieur vienne modifier leur comportement.

Documentation Officielle

Consultez les stratégies avancées de requêtes médias et la personnalisation des points de rupture.

Documentation Responsive →

La grille des breakpoints natifs de Tailwind

Tailwind propose 5 points de rupture standards basés sur des requêtes média de type min-width :

Breakpoint Largeur minimale CSS natif équivalent Cible matérielle courante
sm 640px @media (min-width: 640px) Smartphones format paysage
md 768px @media (min-width: 768px) Tablettes (iPad, etc.)
lg 1024px @media (min-width: 1024px) Laptops & Écrans de bureau standards
xl 1280px @media (min-width: 1280px) Moniteurs haute résolution
2xl 1536px @media (min-width: 1536px) Grands moniteurs / TV 4K
Le piège de la surcharge : Évitez d'écrire class="w-full md:w-full". Si un élément doit occuper toute la largeur sur mobile et sur desktop, écrivez simplement class="w-full". Ne surchargez vos éléments que lorsque la géométrie change réellement d'un écran à l'autre.

2. Architecture Dark Mode : Comment fonctionne l'inversion de contraste ?

Plutôt que de charger une feuille de style alternative ou de manipuler de complexes fichiers de variables CSS, Tailwind intègre une variante d'état universelle : le préfixe dark:.

Par défaut, Tailwind est configuré pour écouter la préférence système de l'utilisateur (définie dans les paramètres d'affichage de macOS, Windows, Android ou iOS) via la média query prefers-color-scheme.

Si la préférence système est configurée sur "Sombre", toutes les classes préfixées par dark: s'activent et écrasent automatiquement leurs équivalents clairs.

Documentation Officielle

Découvrez comment basculer d'une détection système (media) à un contrôle par classe JavaScript (selector).

Documentation Dark Mode →
Exemple d'inversion colorimétrique
<!-- Fond blanc et texte noir par défaut / Fond noir et texte blanc en Dark Mode -->
<div class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 border border-gray-200 dark:border-gray-800">
  <h3 class="text-lg font-bold">Titre Dynamique</h3>
</div>

3. Exercice Pratique : Le Composant "Caméléon"

Votre défi pour cette séance de 2 heures est de faire évoluer la carte logement conçue lors du Cours 1 pour la rendre adaptative. Elle doit changer de forme physique selon l'écran et réagir de manière fluide aux changements de luminosité du système (Dark Mode).

Cahier des charges de la transformation :

A. Comportement Réactif (Layout)
  • Sur Mobile (comportement par défaut) : La carte conserve sa structure verticale du cours 1 (Image au-dessus, contenu textuel en dessous). Sa largeur est maximale mais contrainte par un wrapper.
  • Sur Écran Intermédiaire et Large (md: et plus) : La carte pivote horizontalement. Elle doit utiliser Flexbox (md:flex md:flex-row). L'image se place à gauche et doit occuper une largeur fixe (md:w-48 md:h-full), tandis que la zone de texte à droite prend tout l'espace restant (flex-1).
B. Comportement Colorimétrique (Dark Mode)
  • Le Conteneur : Fond blanc bg-white en mode clair, basculant sur un fond ardoise sombre dark:bg-slate-900 en mode sombre. Les bordures passent de border-gray-100 à dark:border-slate-800.
  • La Typographie : Le titre passe de text-gray-900 à dark:text-white, le descriptif de text-gray-400 à dark:text-slate-400.
  • Le Badge : Devient plus discret et moins agressif en mode sombre (ex: fond rose très opaque dark:bg-pink-950/30 et texte rose clair dark:text-pink-400).
  • Le Bouton de Réservation : En clair, il est noir à texte blanc. En sombre, il s'inverse pour devenir blanc à texte noir (dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100).
Aperçu Cible de l'exercice (Mode Clair & Sombre cumulés)
Villa
Logement
Villa d'architecte

180 € / nuit

Villa
Logement
Villa d'architecte

180 € / nuit

🔒 Verrou pédagogique : Accéder à la correction du Cours 2

Saisissez le mot de passe fourni par l'enseignant pour dévoiler l'architecture responsive double-sens validée.

Cours 3 (2 heures)

Structures Macro : Maîtrise de Flexbox & CSS Grid

Objectifs de la séance

  • Bannir définitivement les techniques d'alignement obsolètes (floats, positionnements absolus détournés).
  • Maîtriser la distribution unidimensionnelle (Flexbox) pour les alignements de composants et barres d'outils.
  • Apprivoiser l'architecture bidimensionnelle (CSS Grid) pour structurer des gabarits de pages entières et des galeries complexes.
  • Manipuler l'écosystème des classes de gouttières (`gap`, `gap-x`, `gap-y`) pour automatiser la gestion des espacements sans effets de bord.
  • Orchestrer l'assemblage complet d'une interface de type Application Web (Dashboard) fluide et défilante.

1. Fondations macro-structurelles : Distribuer l'espace proprement

Lorsque vous concevez une page Web complète, vous manipulez deux types de géométries d'affichage : les alignements sur un seul axe (horizontal ou vertical) et les structures sur deux axes simultanés (colonnes et lignes). Tailwind intègre des raccourcis utilitaires calqués directement sur les spécifications W3C les plus robustes : CSS Flexbox et CSS Grid.

Flexbox (`flex`)

Idéal pour les structures unidimensionnelles. On l'utilise pour aligner des éléments le long d'une ligne ou d'une colonne unique. Exemples types : une barre de navigation, une liste de badges imbriqués, l'alignement centré d'une icône à côté d'un texte.

CSS Grid (`grid`)

Plaque tournante des structures bidimensionnelles. Indispensable pour l'architecture macro globale de vos interfaces ou pour la distribution de galeries de cartes complexes où les éléments doivent s'aligner de manière rigoureuse à la fois horizontalement et verticalement.

2. Guide syntaxique : Le catalogue d'alignement atomique

A. L'univers Flexbox

La classe flex transforme instantanément le conteneur en élément parent flexible. Par défaut, la direction est horizontale (flex-row). Elle se bascule verticalement via flex-col.

  • Axe principal (Justify) : L'alignement horizontal se gère via justify-start (à gauche), justify-center (centré), ou justify-between (repousse les éléments aux extrémités pour distribuer l'espace vide).
  • Axe secondaire (Items) : L'alignement vertical se contrôle par items-center (aligne parfaitement les milieux des boîtes) ou items-stretch (étire les hauteurs par défaut).
Documentation Officielle

Consultez l'ensemble des modificateurs d'axe (Flex Direction, Wrap, Grow et Shrink).

Doc Flexbox →

B. Le système CSS Grid fractionnaire

Pour créer des grilles, on initialise le conteneur avec grid, puis on spécifie la structure du découpage via la syntaxe grid-cols-{nombre}. Tailwind intègre un découpage standardisé allant jusqu'à 12 fractions régulières (grid-cols-12).

<!-- Grille adaptative : 1 colonne sur mobile, 3 colonnes sur tablette, 4 sur desktop -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <div>Élément 1</div>
  <div>Élément 2</div>
</div>
Documentation Officielle

Apprenez à gérer les fusions de lignes et colonnes complexes (Grid Template Columns & Spanning).

Doc Grid →

C. La révolution de la gestion d'espace : L'utilitaire Gap

L'un des plus grands défis de l'intégration traditionnelle résidait dans l'application de marges externes (margin-right / margin-bottom) sur les enfants, forçant souvent à tricher avec des pseudo-sélecteurs :last-child pour annuler la marge sur le dernier élément.

La bonne pratique Tailwind : Utilisez exclusivement la classe gap-{valeur} sur le conteneur parent. La gouttière se calcule de manière automatisée uniquement entre les blocs enfants, sans jamais déborder sur les pourtours du cadre. Vous pouvez dissocier les axes avec gap-x-4 (horizontal) et gap-y-6 (vertical).
Documentation Officielle

Visualisez les correspondances de l'échelle d'espacement numérique (`gap-1` à `gap-96`) appliquées aux grilles.

Doc Gap Utilities →

3. Exercice Pratique : L'Application Web de Distribution (Dashboard)

Votre mission consiste à mettre en place la structure macroscopique complète d'un tableau de bord de type plateforme de vidéo à la demande ou de gestion immobilière. L'interface ne doit pas dépasser la ligne d'horizon du moniteur, éliminant ainsi le défilement global au profit de zones de défilement internes isolées.

Spécifications techniques impératives du Gabarit :

  • Le Conteneur Racine : Doit occuper exactement toute la hauteur de la fenêtre graphique visible (h-screen), utiliser une structure flexible horizontale (flex flex-row), un fond gris clair et interdire les barres de défilement externes (overflow-hidden).
  • La Barre Latérale (Aside Navigation) : Largeur fixe stricte de 16rem (w-64), fond gris foncé ou noir (bg-gray-900), texte blanc. Cette barre latérale est masquée sur smartphone (hidden) et s'affiche obligatoirement à partir du breakpoint intermédiaire (md:block).
  • Le Bloc Central de Contenu : Prend tout l'espace disponible restant à droite de la barre latérale (flex-1), et se découpe verticalement (flex flex-col h-full).
  • La Barre Supérieure (Header / Topbar) : Hauteur fixe de 4rem (h-16), fond blanc pur, séparée du reste par une fine ligne grise inférieure. Elle doit contenir un titre aligné à gauche et une zone profil alignée à l'extrême droite.
  • La Zone de Défilement Principale (Main) : Doit occuper le reste de l'espace vertical. C'est elle qui encaisse le défilement si le catalogue est volumineux (flex-1 overflow-y-auto p-6).
  • La Grille Intérieure de Cartes : Au cœur de cette zone principale, vous intégrerez une grille réactive distribuant les cartes produits conçues au Cours 2. La grille doit afficher : **1 colonne** sur mobile, **2 colonnes** dès le breakpoint sm:, **3 colonnes** sur md: et **4 colonnes** sur écran large lg:.
Aperçu Cible de la Macro-Structure (Desktop)
Schéma macro : Conteneur global figé à hauteur d'écran, flux de cartes internes défilant unilatéralement.

🔒 Verrou pédagogique : Accéder à la correction du Cours 3

Saisissez le code d'accès de session pour afficher le squelette architectural complet du Dashboard.

Cours 4 (2 heures)

Configuration Avancée, Directives CSS & Animations

Objectifs de la séance

  • Comprendre le rôle du fichier de configuration de Tailwind pour surcharger ou étendre le design system par défaut.
  • Savoir utiliser les directives `@apply` et `@layer` pour factoriser le code répétitif sans polluer le HTML.
  • Maîtriser les transitions physiques, les transformations spatiales (scale, rotate, translate) et les animations fluides.
  • Créer des composants hautement interactifs combinant états dynamiques, pseudo-classes et animations temporelles.

🛠️ Guide de démarrage : Installer npm et structurer son projet

Pour exploiter pleinement la puissance de la configuration et des directives CSS de Tailwind, il est nécessaire d'installer Tailwind via un gestionnaire de dépendances. Le plus standard est npm (Node Package Manager).

🤔 C'est quoi Node.js et npm ?

Node.js est un environnement qui permet d'exécuter du JavaScript en dehors du navigateur web (sur votre ordinateur). npm est installé automatiquement avec Node.js ; c'est un catalogue géant d'outils et de bibliothèques de code gratuits que vous pouvez télécharger instantanément en ligne de commande.

Étape 1 : Le protocole d'installation pas-à-pas

  1. Télécharger Node.js : Allez sur le site officiel nodejs.org, téléchargez la version **LTS** (Recommandée) pour votre système (Windows/Mac) et installez-la comme n'importe quel logiciel.
  2. Ouvrir un Terminal : Ouvrez votre éditeur de code (VS Code) et ouvrez le terminal intégré (Ctrl + ` ou Cmd + ` sur Mac).
  3. Initialiser le projet : Tapez la commande suivante pour créer le fichier d'identité de votre projet web (package.json) : 
    npm init -y
  4. Installer Tailwind CSS : Téléchargez l'outil de build officiel en tapant : 
    npm install -D tailwindcss
  5. Créer le fichier de configuration : Générez le fameux fichier tailwind.config.js : 
    npx tailwindcss init

Étape 2 : L'arborescence professionnelle recommandée

Pour que le compilateur Tailwind sache où chercher vos classes et où générer son fichier CSS optimisé, organisez votre projet ainsi :

📁 mon-projet-tailwind/
├── 📁 src/ ── # Vos fichiers sources de travail
│ └── 📄 input.css ── # Votre feuille CSS maîtresse (avec @layer et @apply)
├── 📁 dist/ ── # Le dossier de production généré automatiquement
│ └── 📄 output.css ── # Le CSS final ultra-optimisé produit par Tailwind
├── 📄 index.html ── # Votre page HTML principale (lie le dist/output.css)
├── 📄 package.json ── # Registre des dépendances npm
└── 📄 tailwind.config.js ── # Vos réglages, couleurs et extensions graphiques

1. Personnaliser Tailwind : Le fichier `tailwind.config.js`

Jusqu'à présent, nous avons utilisé les valeurs par défaut de Tailwind CSS. Mais en agence ou sur un projet d'envergure, vous devez respecter une charte graphique stricte (typographies spécifiques, couleurs de marque inédites, breakpoints sur-mesure). C'est le rôle du fichier de configuration tailwind.config.js.

Il y a deux manières de configurer vos valeurs dans l'objet theme :

  • Surcharger l'existant (Écrasement direct) : Si vous écrivez vos propriétés directement sous theme: { ... }, toutes les valeurs par défaut de Tailwind pour cette catégorie disparaissent au profit des vôtres.
  • Étendre l'existant (Recommandé) : Si vous écrivez vos propriétés sous theme: { extend: { ... } }, vous conservez l'intégralité du catalogue Tailwind tout en y injectant vos propres variables personnalisées.
Documentation Officielle

Explorez le fonctionnement de l'architecture du fichier de configuration (Theme Configuration).

Doc Theme Configuration →
Exemple de configuration - tailwind.config.js
module.exports = {
  content: ["./*.html", "./src/**/*.{js,css}"], // Indique à Tailwind où chercher les classes pour purger
  theme: {
    extend: {
      colors: {
        // Ajout d'une couleur de marque personnalisée
        brand: {
          light: '#f3e8ff',
          DEFAULT: '#6b21a8', // s'utilisera via la classe bg-brand ou text-brand
          dark: '#4c1d95',
        }
      },
      fontFamily: {
        // Intégration d'une police système ou Google Font personnalisée
        sans: ['Geist', 'Inter', 'sans-serif'],
      }
    }
  }
}

2. Dompter l'accumulation de classes : `@apply`

L'une des critiques récurrentes faites à l'approche Utility-First est la longueur des chaînes de classes dans le HTML. Lorsque vous avez 15 boutons strictement identiques sur votre application, répéter "bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-indigo-700 transition" pollue le code et complique la maintenance.

La directive @apply vous permet d'extraire ces classes utilitaires répétitives pour les encapsuler dans une classe CSS sémantique personnalisée (dans votre feuille de style d'entrée).

Dans votre fichier src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-300;
  }
}
Dans votre fichier index.html
<!-- Code HTML nettoyé, élégant et maintenable -->
<button class="btn-primary">
  Confirmer l'inscription
</button>
Documentation Officielle

Approfondissez l'utilisation des fonctions et directives natives (`@layer`, `@apply`, `@config`).

Doc Functions & Directives →
Règle d'or de l'utilisation d' @apply : N'utilisez pas cette directive trop tôt. Ne créez des composants personnalisés avec @apply que pour des éléments structurels hautement répétitifs et stables (boutons, inputs de formulaires, badges). Pour l'agencement global, restez sur du HTML pur pour garder la flexibilité de Tailwind.

3. Fluidité visuelle : Transitions & Transformations

Pour donner une impression de qualité supérieure ("feel premium"), vos éléments interactifs doivent réagir de manière organique aux interactions utilisateurs. Tailwind intègre des raccourcis très simples pour orchestrer des micro-animations spatiales :

  • La Transition (transition-all) : Indique au navigateur d'animer les changements d'état de manière fluide au lieu d'une coupure nette et instantanée. On l'associe toujours à une durée (duration-300 pour 300ms) et une courbe d'accélération (ease-in-out).
  • Le Changement d'Échelle (scale-95 / scale-105) : Réduit ou agrandit un élément sous l'effet du survol ou du clic.
  • La Rotation (hover:rotate-6) : Utile pour dynamiser les icônes.
  • Le Déplacement (hover:-translate-y-1) : Très populaire sur les grilles de cartes pour donner un effet de surélévation "3D" physique au survol.
Documentation Officielle

Parcourez le catalogue complet des utilitaires de transition de propriétés, de timing et d'animations clés.

Doc Transitions & Animations →

4. Exercice Pratique : Le Hub de Cartes Interactives

Pour valider cette dernière étape du module, les étudiants doivent concevoir une grille de cartes d'offres de services ou de produits premium (par exemple, des forfaits d'hébergement ou des abonnements de streaming). Ces cartes doivent réagir physiquement au survol de la souris en combinant élévation, changement d'échelle, modification d'opacité et effets de lueur diffuse.

Cahier des charges de l'exercice :

  • Le Wrapper de Grille : Utilisez Grid pour créer un conteneur réactif (1 colonne mobile, 3 colonnes desktop) avec une gouttière généreuse (gap-8).
  • Comportement Physique de la Carte au Survol (hover:) :
    • S'élever légèrement vers le haut via un déplacement vertical négatif (hover:-translate-y-2).
    • S'agrandir de manière infime (hover:scale-[1.02]).
    • Multiplier l'intensité de son ombre portée pour simuler l'éloignement physique du plan de fond (hover:shadow-2xl hover:shadow-indigo-500/10).
    • Toutes ces transformations doivent s'opérer de manière fluide sur un intervalle de 300ms (transition-all duration-300 ease-out).
  • Bouton avec effet d'onde et de lueur (Glow) : Le bouton d'appel à l'action de la carte doit s'illuminer d'un halo de couleur externe au survol de la souris à l'aide des ombres colorées (hover:shadow-lg hover:shadow-indigo-500/50).
Rendu Cible Attendu (Simulation au survol)
⚡
Populaire
Formule Pro

La puissance de l'automatisation sans limites.

49 € / mois

Démarrer l'essai

Remarquez la surélévation de la carte, l'ombre diffuse indigo-500 et le halo lumineux sous le bouton principal.

🔒 Verrou pédagogique : Accéder à la correction du Cours 4

Entrez le mot de passe final de session pour débloquer l'implémentation complète des micro-interactions physiques.

Cours 5 (2 heures - Bonus)

Workflow Augmenté : Concevoir et Intégrer avec l'IA

Objectifs de la séance

  • Maîtriser l'art du prompt d'interface (UI Prompting) pour générer des squelettes HTML/Tailwind viables d'un seul coup.
  • Apprendre à utiliser les LLM (ChatGPT, Claude, v0.dev) pour analyser des captures d'écran et en extraire le code Tailwind.
  • Découvrir les outils de génération d'UI générative (comme v0 de Vercel ou Bolt.new) basés sur Tailwind.
  • Adopter une méthode rigoureuse pour relire, épurer et optimiser le code Tailwind généré par l'IA (éviter les hallucinations de classes).

1. Pourquoi l'IA "adore" Tailwind CSS ?

Si vous demandez à une IA (comme Claude ou GPT-4) de vous générer une interface avec du CSS classique ou du Sass, le résultat est souvent catastrophique : elle génère un fichier CSS à part, oublie de lier les classes, crée des collisions de sélecteurs et peine à harmoniser les couleurs.

Avec Tailwind CSS, c'est le jour et la nuit. Comme tout le style est encapsulé directement dans le HTML via des classes utilitaires standards, l'IA n'a qu'un seul fichier à manipuler. De plus, le "Design System" de Tailwind étant figé (les échelles de tailles, de couleurs, de paddings), l'IA fait très peu d'erreurs d'harmonisation car elle pioche dans un dictionnaire de classes ultra-documenté sur le web.

2. Guide de Prompting : Le "System Prompt" parfait pour l'UI

Pour obtenir un code Tailwind propre et moderne (sans styles "inline" bizarres ou classes obsolètes), vous devez cadrer l'IA. Voici le prompt de structure que vous devez lui injecter avant de lui demander un composant :

Prompt d'amorce pour LLM (Claude / ChatGPT)
"Agis en tant qu'intégrateur web senior expert en Tailwind CSS v3+. 
Je vais te demander de concevoir un composant d'interface. Respecte STRICTEMENT ces règles :
1. Utilise uniquement les classes utilitaires natives de Tailwind CSS. Pas de styles 'style=\"...\"' en ligne.
2. Applique une philosophie Mobile-First rigoureuse (classes par défaut pour mobile, puis préfixes 'md:' pour desktop).
3. Utilise des arrondis modernes (rounded-2xl ou rounded-3xl), des ombres subtiles (shadow-sm, shadow-md) et une palette de couleurs élégante (privilégie les tons ardoises/zinc 'slate' ou 'zinc' pour les neutres).
4. Prépare le composant pour le Dark Mode avec la variante 'dark:'.
5. Rends le bouton interactif avec des transitions douces (transition-all duration-200 ease-in-out) et des effets hover/active physiques (hover:-translate-y-0.5, etc.)."

3. Les outils révolutionnaires du marché

Au-delà des simples chats textuels, des outils spécialisés ont vu le jour pour créer des interfaces complètes en quelques secondes :

v0.dev (par Vercel)

Vous lui décrivez ce que vous voulez (ex: "Une page de paiement Stripe épurée") et il génère instantanément plusieurs propositions d'interfaces codées en Tailwind et React. On peut modifier chaque section à la voix ou par texte.

Claude Artifacts

L'interface interactive d'Anthropic permet de voir le rendu du HTML/Tailwind en temps réel dans une fenêtre adjacente pendant que vous ajustez le design avec le chatbot.

Bolt.new / Lovable

Des environnements de développement complets dans le navigateur qui génèrent, exécutent et déploient des applications entières basées sur Tailwind CSS à partir d'un simple prompt.

4. Exercice Pratique : Reverse Engineering de Maquette

Pour cet exercice, les étudiants vont utiliser la vision par ordinateur d'un LLM pour cloner une interface réelle.

Consigne de l'exercice : Trouvez une capture d'écran d'un composant complexe sur internet (ex: un lecteur audio Spotify, un calendrier interactif, ou un widget météo). Importez cette image dans votre IA préférée et utilisez le prompt suivant :
"Analyse cette image et recrée exactement le même composant visuel en utilisant uniquement du HTML5 et Tailwind CSS. Fais attention aux moindres détails : espacements, opacités, icônes (utilise des SVGs ou Heroicons) et l'harmonie des polices."

La checklist de validation humaine :

L'IA n'est jamais parfaite. Les étudiants doivent manuellement vérifier et nettoyer le code généré en passant au crible les points suivants :

  • Nettoyage des hallucinations : L'IA a-t-elle inventé des classes qui n'existent pas (ex: text-md-center au lieu de md:text-center) ?
  • Respect du responsive : L'IA a-t-elle figé des largeurs physiques (ex: w-[450px]) au lieu d'utiliser des classes fluides adaptatives (ex: w-full max-w-md) ?
  • Sémantique HTML : A-t-elle empilé des <div> stériles ou a-t-elle utilisé des balises sémantiques (<button>, <nav>, <header>) ?
Exemple de widget "Météo" généré & validé
Strasbourg

Nuageux • Enseignant-IA

☁️
14°C
Vent 12 km/h
Humidité 78%
Pluie 10%

🔒 Verrou pédagogique : Accéder au code optimisé du Widget Météo

Saisissez le mot de passe final de validation pour afficher le code propre, épuré de toute scorie d'IA.

Cours 6 (2 heures - Évaluation)

Projet Synthèse : Évaluation Pratique & Grille d'Évaluation

Objectifs de la séance d'évaluation

  • Mobiliser l'ensemble des acquis des 5 cours précédents dans un projet concret en temps limité (1h30 de code).
  • Construire une landing page produit ou un dashboard complet respectant les normes d'intégration modernes.
  • Démontrer la maîtrise absolue du Mobile-First, du Dark Mode, des grilles fluides et des micro-interactions.
  • Auto-évaluer son code à l'aide d'une grille barémée rigoureuse sur 10 points.

1. Sujet de l'Épreuve : "SaaS Launchpad"

Vous êtes recruté(e) comme intégrateur/trice Front-End pour le lancement d'un nouvel outil SaaS de gestion de projets web nommé "TaskPulse". Votre mission est d'intégrer en 1 heure et 30 minutes la section principale de tarification et de présentation ("Pricing & Features Hub").

Le fichier doit être entièrement autonome (index.html) et utiliser uniquement le moteur Tailwind CSS (CDN). Aucune ligne de CSS personnalisé traditionnel n'est autorisée.

2. Cahier des Charges Techniques (4 Bloc-Clés)

Bloc 1 : En-tête Hero & Navigation

Une barre de navigation réactive (logo + liens) et un titre accrocheur centré avec un badge animé ("v2.0 disponible") et une sous-description explicative claire.

Bloc 2 : Grille de Cartes Offres (Pricing)

Une grille adaptative (1 col mobile, 3 cols desktop) avec 3 forfaits (Starter, Pro, Enterprise). La carte "Pro" doit être mise en avant (border indigo, badge "Le plus populaire").

Bloc 3 : Micro-Interactions & Hover

Toutes les cartes doivent s'élever au survol (hover:-translate-y-2). Les boutons doivent posséder des ombres colorées interactives et des transitions douces.

Bloc 4 : Dark Mode Intégral

L'intégralité du composant doit réagir au Dark Mode système (dark:). Les fonds, textes, bordures et badges doivent s'inverser sans perte de contraste.

3. Grille d'Évaluation Officielle (Barème /10)

Chaque critère est évalué de manière stricte et objective selon les critères ci-dessous :

Critère d'évaluation Description technique attendue Barème
1. Architecture HTML & Sémantique Emploi rigoureux des balises sémantiques (<header>, <main>, <section>, <button>). Aucune dépendance CSS externe. Code propre et indenté. / 1.5 pts
2. Responsiveness & Mobile-First Démarche Mobile-First respectée. Utilisation correcte des breakpoints (sm:, md:, lg:). Aucun débordement horizontal (overflow-x parasite) sur smartphone ($375\text{px}$). / 2.5 pts
3. Support Dark Mode (`dark:`) Prise en charge complète du mode sombre sur l'ensemble des éléments (fonds, textes, cartes, bordures, boutons). Rendu esthétique et lisible sans baisse de lisibilité. / 2.0 pts
4. Micro-interactions & Polish Animations et transitions fluides au survol (transition-all duration-300, hover:-translate-y-*, ombres portées dynamiques hover:shadow-*). / 2.0 pts
5. Respect du Design System & Hiérarchie Utilisation cohérente des échelles de marges/paddings Tailwind, nuanciers de couleurs harmonieux, hiérarchie typographique fluide (tailles, graisses). / 2.0 pts
Total Général Note finale ramenée sur 10 points. / 10 pts

🔒 Verrou enseignants : Débloquer la solution modèle de l'évaluation

Saisissez le code d'évaluation pour afficher la référence d'intégration validée à 10/10.