Cours - Formation Tailwind CSS

1.1 Qu'est-ce que Tailwind CSS ?

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 :

.btn-primary { background: #3b82f6; padding: 0.75rem 1.5rem; }


<button class="bg-blue-500 px-6 py-3 rounded-lg hover:bg-blue-600">

1.2 Pourquoi Tailwind a révolutionné le CSS ?

⚡

Productivité x10

Plus besoin de switcher entre HTML et CSS. Tout se fait dans le markup.

🎨

Design System intégré

Palette de couleurs, espacements, typographie cohérents prêts à l'emploi.

📱

Responsive natif

Les breakpoints sm:, md:, lg: font partie intégrante du framework.

🗑️

Bundle optimisé

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.

1.3 Tailwind vs Bootstrap vs autres

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

1.4 Installation - 3 méthodes

RECOMMANDÉ

Méthode 1 : CDN (pour apprendre)

Le plus rapide pour démarrer, parfait pour cette formation :

<script src="https://cdn.tailwindcss.com"></script>

Méthode 2 : npm (pour les pros)

# 1. Initialiser le projet
npm init -y

# 2. Installer Tailwind
npm install -D tailwindcss postcss autoprefixer

# 3. Créer le fichier de config
npx tailwindcss init -p

Méthode 3 : CLI

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

1.5 Votre premier composant Tailwind

Créons une carte de profil stylisée, entièrement avec des classes Tailwind :

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300">
  <img class="w-full h-48 object-cover" src="avatar.jpg">
  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900">Marie Dupont</h2>
    <p class="text-gray-600 mt-2">Développeuse Front-end</p>
    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Contacter</button>
  </div>
</div>

👩‍💻

Marie Dupont

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

📝 Exercice pratique 1.1

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

Voir la solution → 🧠 Testez vos connaissances →

Durée : 45 min 1 exercice + 1 quiz

2.1 Le concept des classes utilitaires

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.

/* AVANT : CSS traditionnel */
.card {
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

<div class="p-4 bg-white rounded-lg shadow-md">
Contenu
</div>

✨ Avantage majeur : Pas besoin de nommer vos classes, pas de conflits CSS, et surtout : vous ne quittez jamais votre fichier HTML !

2.2 Layout & Positionnement

Tailwind fournit des classes pour tous les types de layout modernes :

Flexbox (display: flex)

flex → display: flex
flex-row → flex-direction: row
flex-col → flex-direction: column
justify-center → justify-content: center
items-center → align-items: center
flex-1 → flex: 1 1 0%
gap-4 → gap: 1rem

Démonstration : Centre un élément parfaitement

<div class="flex justify-center items-center h-screen">

Grid (display: grid)

grid → display: grid
grid-cols-3 → grid-template-columns: repeat(3, 1fr)
grid-rows-2 → grid-template-rows: repeat(2, 1fr)
col-span-2 → grid-column: span 2 / span 2
gap-6 → gap: 1.5rem

2.3 Le système de spacing (margin & padding)

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)

/* Format : {property}{side}-{size} */
px-4 → padding-left/right: 16px
py-2 → padding-top/bottom: 8px
mt-8 → margin-top: 32px
mx-auto → margin-left/right: auto (centrage)

2.4 Le système de couleurs Tailwind

Palette de couleurs complète avec 10 niveaux d'intensité (50, 100, 200... 900) :

blue-500

red-500

green-500

yellow-500

purple-500

pink-500

indigo-500

slate-500

/* Format : {property}-{color}-{intensity} */
bg-blue-500 → background-color: #3b82f6
text-red-600 → color: #dc2626
border-slate-300 → border-color: #cbd5e1
bg-gradient-to-r from-indigo-500 to-purple-500 → dégradé !

2.5 Typographie complète

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

📝 Exercice pratique 2.1

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

Voir la solution → 🧠 Testez vos connaissances →

Durée : 60 min 1 exercice pratique

3.1 Pourquoi le Mobile-First ?

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.

3.2 Les 5 breakpoints de Tailwind

Base

Mobile (défaut)

< 640px - Styles de base sans préfixe

sm:

Small

≥ 640px (petits téléphones paysage)

md:

Medium

≥ 768px (tablettes portrait)

lg:

Large

≥ 1024px (tablettes paysage / laptops)

xl:

Extra Large

≥ 1280px (desktops)

/* Syntaxe : {classe} ou {breakpoint}:{classe} */
text-base → Tous les écrans
sm:text-lg → Écrans ≥ 640px
md:text-xl → Écrans ≥ 768px
lg:text-2xl → Écrans ≥ 1024px

3.3 Exemples concrets responsives

🎨 Grille responsive évolutive

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">

1 col
Mobile

2 cols
sm ≥640px

3 cols
md ≥768px

4 cols
lg ≥1024px

📐 Navigation qui se transforme

hidden md:flex → Caché sur mobile, visible sur md+
flex md:hidden → Visible sur mobile, caché sur md+

📏 Espacements adaptatifs

p-4 md:p-8 lg:p-12
→ 16px (mobile) / 32px (tablette) / 48px (desktop)

3.4 Containers responsives

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

container mx-auto px-4 → Container centré avec padding sur mobile

3.5 Utilitaires responsive avancés

🔧 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+

📝 Exercice pratique 3.1

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

Voir la solution → 🧠 Testez vos connaissances →

Durée : 50 min 1 exercice pratique

4.1 Pourquoi implémenter le Dark Mode ?

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.

👁️

Confort visuel

Moins de fatigue oculaire dans les environnements sombres ou le soir.

🔋

Économie d'énergie

Jusqu'à 60% d'économie sur les écrans OLED/AMOLED.

4.2 Configuration dans tailwind.config.js

Tailwind offre 3 stratégies pour le dark mode :

RECOMMANDÉ

Stratégie 'class' (manuelle)

Vous contrôlez le mode via une classe sur le HTML (bouton toggle).

// tailwind.config.js
module.exports = {
darkMode: 'class',
// ... reste de la config
}

Stratégie 'media' (automatique)

Suit automatiquement les préférences système de l'utilisateur.

// tailwind.config.js
module.exports = {
darkMode: 'media',
// Suit prefers-color-scheme
}

4.3 La syntaxe dark: en pratique

Préfixez n'importe quelle classe avec dark: pour qu'elle s'applique en mode sombre :

/* Format : dark:{classe} */
bg-white dark:bg-slate-900 → Blanc (clair) / Slate-900 (sombre)
text-gray-900 dark:text-white → Texte foncé / Texte blanc
border-gray-200 dark:border-slate-700 → Bordure claire / Bordure sombre

🎨 Exemple complet : Carte adaptative

<div class="bg-white dark:bg-slate-800 text-gray-900 dark:text-white border border-gray-200 dark:border-slate-700 rounded-lg p-6 shadow-md dark:shadow-none">
<h2>Titre de la carte</h2>
</div>

4.4 Implémenter un bouton toggle

Voici le JavaScript pour basculer entre les modes :

// HTML : <button id="theme-toggle">🌓</button>

const toggle = document.getElementById('theme-toggle');
const html = document.documentElement;

// Vérifie la préférence sauvegardée
if (localStorage.getItem('theme') === 'dark') {
  html.classList.add('dark');
}

toggle.addEventListener('click', () => {
  html.classList.toggle('dark');
  const isDark = html.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

💡 Explication : La classe dark sur l'élément <html> active automatiquement toutes les classes préfixées par dark: dans votre CSS Tailwind.

4.5 Palettes de couleurs recommandées

Associations classiques pour un dark mode élégant :

🌙 Mode Clair

bg-white

bg-gray-50

text-gray-900

🌑 Mode Sombre

dark:bg-slate-900

dark:bg-slate-800

dark:text-white

📝 Exercice pratique 4.1

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

Voir la solution → 🧠 Testez vos connaissances →

Durée : 40 min 1 exercice pratique

5.1 La directive @apply

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.

/* input.css - Création de composants */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Composant bouton primaire */
.btn-primary {
@apply px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200;
}

/* Composant carte */
.card {
@apply bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-slate-700;
}

⚠️ 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.

5.2 Personnaliser tailwind.config.js

Tailwind est entièrement configurable. Voici les extensions les plus courantes :

🎨 Ajouter des couleurs personnalisées

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
    },
  },
}

→ Utilisation : bg-brand-500 text-brand-900

📐 Customiser les breakpoints

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

✨ Ajouter des animations

module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in',
        'bounce-slow': 'bounce 2s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
}

→ Utilisation : animate-fade-in animate-bounce-slow

5.3 Plugins officiels essentiels

@tailwindcss/forms

Populaire

Reset et styles de base pour tous les éléments de formulaire.

npm install -D @tailwindcss/forms

@tailwindcss/typography

Blog

Styles typographiques magnifiques pour le contenu HTML (articles, docs).

prose prose-slate

@tailwindcss/aspect-ratio

Contrôle précis des ratios d'aspect pour images et vidéos.

aspect-w-16 aspect-h-9

@tailwindcss/line-clamp

Troncage de texte avec ellipsis après X lignes.

line-clamp-3

5.4 Optimisation pour la production

Tailwind utilise PurgeCSS pour supprimer automatiquement le CSS non utilisé :

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx', // React
  ],
  theme: {
    // ...
  },
  plugins: [],
}

📦 Build pour production

# Production build (minifié)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# Résultat typique : ~10KB gzippé !

5.5 Ressources & communauté

📚 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.

🎓 Projet final : Dashboard complet

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

Voir la solution → 🧠 Testez vos connaissances →

Durée : 90 min Projet final

Le Cours Tailwind CSS

Introduction à Tailwind CSS

1.1 Qu'est-ce que Tailwind CSS ?

1.2 Pourquoi Tailwind a révolutionné le CSS ?

Productivité x10

Design System intégré

Responsive natif

Bundle optimisé

1.3 Tailwind vs Bootstrap vs autres

1.4 Installation - 3 méthodes

Méthode 1 : CDN (pour apprendre)

Méthode 2 : npm (pour les pros)

Méthode 3 : CLI

1.5 Votre premier composant Tailwind

Marie Dupont

📝 Exercice pratique 1.1

Classes Utilitaires Fondamentales

2.1 Le concept des classes utilitaires

2.2 Layout & Positionnement

2.3 Le système de spacing (margin & padding)

2.4 Le système de couleurs Tailwind

2.5 Typographie complète

📝 Exercice pratique 2.1

Responsive Design avec Tailwind

3.1 Pourquoi le Mobile-First ?

3.2 Les 5 breakpoints de Tailwind

3.3 Exemples concrets responsives

3.4 Containers responsives

3.5 Utilitaires responsive avancés

📝 Exercice pratique 3.1

Dark Mode et Thèmes

4.1 Pourquoi implémenter le Dark Mode ?

Confort visuel

Économie d'énergie

4.2 Configuration dans tailwind.config.js

Stratégie 'class' (manuelle)

Stratégie 'media' (automatique)

4.3 La syntaxe dark: en pratique

4.4 Implémenter un bouton toggle

4.5 Palettes de couleurs recommandées

📝 Exercice pratique 4.1

Composants & Personnalisation Avancée

5.1 La directive @apply

5.2 Personnaliser tailwind.config.js

5.3 Plugins officiels essentiels

5.4 Optimisation pour la production

5.5 Ressources & communauté

🎓 Projet final : Dashboard complet