Prérequis

Niveau : bases HTML/CSS, notion de Flexbox/Grid.
Outils : Node.js installé, VS Code (extension officielle Tailwind CSS IntelliSense), navigateur moderne.
Temps estimé : 1 h.

Pourquoi Tailwind plutôt que Bootstrap ?

Tailwind est utility-first : vous composez votre design avec des petites classes (flex, p-4, bg-blue-500) au lieu d’écrire du CSS. Avantages : design 100 % custom sans surcharger, fichiers CSS minuscules grâce au tree-shaking, autocomplétion VS Code excellente. Bootstrap reste utile pour les composants prêts (modal, dropdown), Tailwind pour la liberté graphique.

Tailwind CSS : écrire du CSS sans quitter votre HTML

Tailwind CSS est un framework CSS utilitaire. Au lieu d’écrire des classes CSS personnalisées (.card-container, .btn-primary), vous composez votre design directement dans le HTML avec des classes utilitaires prédéfinies (flex items-center gap-4 bg-blue-500 text-white p-4 rounded-lg). Le résultat : vous construisez des interfaces 3 à 5 fois plus vite, sans jamais ouvrir un fichier CSS.

Installation avec Vite

npm create vite@latest mon-projet
cd mon-projet
npm install
npm install -D tailwindcss @tailwindcss/vite

Ajoutez le plugin Tailwind dans vite.config.js :

import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

Dans votre fichier CSS principal :

@import "tailwindcss";

Les classes essentielles en 5 minutes

Espacement (margin et padding)

<!-- p = padding, m = margin, x = horizontal, y = vertical -->
<div class="p-4">     <!-- padding: 1rem (16px) partout -->
<div class="px-6">    <!-- padding-left + right: 1.5rem -->
<div class="mt-8">    <!-- margin-top: 2rem -->
<div class="mb-2">    <!-- margin-bottom: 0.5rem -->

<!-- Échelle : 1=0.25rem, 2=0.5rem, 4=1rem, 6=1.5rem, 8=2rem, 12=3rem, 16=4rem -->

Flexbox

<div class="flex items-center justify-between gap-4">
  <span>Logo</span>
  <nav class="flex gap-6">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
  </nav>
</div>

Grid

<!-- Grille responsive de cartes -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-6 rounded-lg shadow">Carte 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Carte 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Carte 3</div>
</div>

Typographie

<h1 class="text-3xl font-bold text-gray-900">Titre principal</h1>
<p class="text-base text-gray-600 leading-relaxed">Paragraphe</p>
<span class="text-sm font-medium text-blue-600">Lien</span>

<!-- Tailles : text-xs, text-sm, text-base, text-lg, text-xl, text-2xl... -->

Couleurs

<!-- bg = background, text = couleur du texte, border = bordure -->
<div class="bg-blue-500 text-white">Fond bleu, texte blanc</div>
<div class="bg-gray-100 text-gray-800 border border-gray-300">Gris clair</div>

<!-- Échelle de couleurs : 50 (très clair) → 950 (très foncé) -->
<!-- blue-50, blue-100, blue-200... blue-800, blue-900, blue-950 -->

Responsive design avec les préfixes

<!-- Mobile first : sans préfixe = mobile -->
<div class="text-sm md:text-base lg:text-lg">
  Petit sur mobile, normal sur tablette, grand sur desktop
</div>

<div class="flex flex-col md:flex-row gap-4">
  Colonne sur mobile, ligne sur desktop
</div>

<!-- Breakpoints : sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) -->

Exemple complet : carte de profil

<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <img src="photo.jpg" alt="Photo" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900">Mamadou Diallo</h3>
    <p class="text-blue-600 font-medium">Développeur Full Stack</p>
    <p class="mt-3 text-gray-600 text-sm leading-relaxed">
      Passionné par le web et l'open source. Basé à Dakar.
    </p>
    <div class="mt-4 flex gap-3">
      <a href="#" class="flex-1 text-center py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
        Contacter
      </a>
      <a href="#" class="flex-1 text-center py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
        Portfolio
      </a>
    </div>
  </div>
</div>

Hover, focus et états

<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 
               focus:ring-2 focus:ring-blue-300 focus:outline-none
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors px-6 py-3 rounded-lg text-white font-medium">
  Envoyer
</button>

Dark mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  Ce texte s'adapte automatiquement au mode sombre du système
</div>

Quand NE PAS utiliser Tailwind

Projets très petits (une seule page) — le setup ne vaut pas le coup
Si vous travaillez avec des designers qui livrent du CSS personnalisé
Si votre équipe n’est pas formée — Tailwind a une courbe d’apprentissage

Erreurs fréquentes

Modificateurs francisés qui ne marchent pas

Cause : on écrit activé:bg-blue-800 au lieu de active:bg-blue-800. Tailwind n’a aucun modificateur français — le sélecteur n’est pas généré.
Solution : utilisez exclusivement les modificateurs en anglais : hover:, focus:, active:, disabled:, dark:, md:, etc.

Classes invalides ignorées en silence

Cause : typo (bg-blu-500) ou nom inexistant — Tailwind ignore et ne génère rien.
Solution : installez l’extension Tailwind CSS IntelliSense dans VS Code, qui surligne les noms inconnus.

CSS final énorme en production

Cause : mauvaise configuration du content scanning — Tailwind purge selon les fichiers listés.
Solution : en Tailwind v4, le scan des sources est automatique. En v3, vérifiez que content: [...] dans tailwind.config.js couvre tous vos fichiers.

Conflit avec WordPress / Bootstrap

Cause : Tailwind reset agressivement (preflight), ce qui casse les autres styles.
Solution : désactivez le preflight (corePlugins: { preflight: false }) si vous co-existez avec un autre framework.

Exercice

Installez Tailwind avec Vite
Créez une landing page avec : header + hero section + 3 cartes features + footer
Rendez le tout responsive (mobile first)
Ajoutez des animations hover sur les cartes et boutons
Ajoutez le support du dark mode

Dans la continuité

Bootstrap 5 (alternative)
Mode sombre (compatible avec dark: Tailwind)
Documentation officielle : tailwindcss.com — Docs
Composants prêts : Tailwind UI (payant) ou daisyUI (gratuit, basé Tailwind)
Cheat sheet : nerdcave.com — Tailwind Cheat Sheet

Pourquoi adopter Tailwind CSS pour un projet en 2026

Tailwind CSS s’est impose comme le framework CSS dominant pour les projets web modernes, devant Bootstrap et Bulma sur les nouveaux projets greenfield. La version 4 sortie en janvier 2025 supprime le fichier tailwind.config.js obligatoire et migre la configuration vers du CSS pur via la directive @theme. Le moteur Oxide, ecrit en Rust, compile cinq a dix fois plus vite que la v3.

Pour un developpeur a Dakar, Cotonou ou Lome qui livre un site WordPress, une app Next.js ou un dashboard Laravel, Tailwind offre un bundle CSS final autour de 8 a 15 Ko gzip pour un site moyen, contre 60 a 90 Ko avec Bootstrap. Sur les connexions 3G/4G de la zone CFA, c’est un gain de 1 a 2 secondes de chargement.

Etape 1 : Installer Tailwind CSS v4 avec Vite

Tailwind v4 s’installe via le plugin officiel Vite qui remplace l’ancien plugin PostCSS. Dans un projet Vite vide :

npm install tailwindcss @tailwindcss/vite

Modifiez ensuite vite.config.js pour ajouter le plugin :

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [tailwindcss()]
})

Au lancement de npm run dev, Vite compile et sert votre CSS Tailwind avec hot reload. Aucun fichier de configuration JavaScript n’est plus genere par defaut.

Etape 2 : Importer Tailwind dans le CSS d’entree

Dans src/style.css, remplacez les anciennes directives @tailwind base/components/utilities par une seule ligne :

@import "tailwindcss";

Cette directive charge automatiquement les couches Preflight (reset CSS), les composants et les utilitaires. Le CSS final n’inclut que les classes effectivement utilisees dans votre HTML, JSX, Vue ou Blade : c’est le tree-shaking automatique du moteur Oxide.

Etape 3 : Comprendre la philosophie utility-first

Au lieu d’ecrire du CSS classique pour styler un bouton, vous composez le style directement dans le HTML avec des classes courtes :

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Valider
</button>

Chaque classe correspond a une declaration CSS unique : px-4 = padding-inline 1rem, py-2 = padding-block 0.5rem, bg-blue-600 = background-color #2563eb. Au depart c’est verbeux, mais en pratique vous ecrivez 3 fois moins de CSS et zero conflit de classes inter-composants. La maintenance long-terme devient triviale.

Etape 4 : Personnaliser le theme avec @theme

En v4, la configuration se fait directement dans le CSS via la directive @theme. Pour ajouter une couleur de marque et une police custom :

@import "tailwindcss";
@theme {
  --color-marque: #0F766E;
  --color-marque-fonce: #0E5F58;
  --font-sans: "Inter", system-ui, sans-serif;
  --radius-card: 0.75rem;
}

Tailwind genere automatiquement les classes bg-marque, text-marque, border-marque-fonce, font-sans et rounded-card. Cette approche unifie variables CSS natives et configuration Tailwind, ce qui facilite le partage avec d’autres outils comme Storybook ou Figma Tokens.

Etape 5 : Implementer le mode sombre

Tailwind v4 active le dark mode via le selecteur dark:. Ajoutez la classe dark sur l’element racine pour activer manuellement, ou utilisez la media query systeme :

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Contenu adaptatif
</div>

Pour basculer dynamiquement avec un toggle utilisateur, ajoutez ce JavaScript :

const toggle = document.querySelector('#theme-toggle')
toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark')
  localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
})

Au chargement, lisez localStorage pour appliquer la preference : 4 lignes de JS pour un theme persistant. Aucune dependance externe.

Etape 6 : Utiliser les variants responsive et state

Tailwind expose 5 breakpoints par defaut : sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Le mode mobile-first impose : aucun prefixe = mobile, prefixe = a partir de cette taille.

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

Cette grille affiche 1 colonne sur mobile, 2 a partir de 768px, 3 a partir de 1024px. Combine aux variants d’etat (hover:, focus:, active:, disabled:), vous obtenez tout le CSS interactif sans une ligne dans un fichier .css separe.

Etape 7 : Extraire les patterns recurrents avec @apply

Quand un meme jeu de classes revient sur 5+ elements, factorisez avec la directive @apply dans votre CSS :

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-marque text-white rounded-lg
           hover:bg-marque-fonce focus:outline-none focus:ring-2;
  }
}

Vous ecrivez ensuite <button class="btn-primary"> dans le HTML. Attention : ne factorisez pas trop tot, sinon vous recreez le probleme CSS classique de classes generiques difficiles a customiser ponctuellement.

Etape 8 : Optimiser le bundle pour la production

Le moteur Oxide purge automatiquement les classes non utilisees au build. Pour verifier la taille finale :

npm run build
ls -lh dist/assets/*.css

Sur un projet vitrine type, le CSS final pese 7 a 12 Ko gzip. Si la taille depasse 30 Ko, vous avez probablement importe des classes safelistees inutilement ou laisse des fichiers de demo dans le scan. Ajoutez un fichier .tailwindignore ou utilisez la directive @source pour limiter le scan aux dossiers reellement utilises en production.

Etape 9 : Integrer Tailwind dans un theme WordPress

Pour un theme WP custom, ajoutez Tailwind dans functions.php via wp_enqueue_style, en pointant vers le CSS compile par Vite. Le workflow type :

Vite compile src/style.css vers dist/style.css
wp_enqueue_style('mon-theme', get_template_directory_uri() . '/dist/style.css')
Le HTML PHP utilise les classes Tailwind directement dans les templates

Pour le hot reload pendant le dev, configurez Vite en mode dev avec un proxy vers le port WordPress local. Le tutoriel detaille est disponible dans integrer Tailwind dans un theme WordPress custom.

Sur un angle proche, voir migrer Bootstrap vers Tailwind CSS sans tout casser.

Etape 10 : Construire des composants reutilisables avec slots

Dans React, Vue ou Svelte, exploitez les composants pour eviter la duplication de classes. Exemple en React :

function Card({ title, children }) {
  return (
    <div className="rounded-card bg-white dark:bg-gray-800 p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-2">{title}</h3>
      <div className="text-gray-700 dark:text-gray-300">{children}</div>
    </div>
  )
}

Vous reutilisez <Card> partout et n’ecrivez qu’une seule fois les classes Tailwind. Pour les variants (success, warning, error), passez une prop variant et utilisez la librairie clsx ou cva (class-variance-authority) pour composer dynamiquement les classes sans @apply.

Etape 11 : Eviter les antipatterns courants

Trois pieges classiques ralentissent les nouveaux utilisateurs Tailwind. Premier : concatener dynamiquement des classes avec interpolation (bg-{color}-500) – le moteur Oxide ne detecte pas ces classes au scan et les purge a tort. Solution : mappez explicitement les valeurs possibles dans un objet JavaScript.

Deuxieme : reproduire toute son ancienne CSS via @apply, ce qui annule l’avantage utility-first. La regle saine : @apply uniquement pour des composants atomiques rejoues 5+ fois.

Troisieme : oublier le @source directive quand votre HTML est genere ailleurs (PHP, Twig, fichiers Markdown). Sans cela, les classes presentes uniquement dans ces fichiers sont purgees du bundle final et les pages s’affichent sans style. Verifiez en production des le premier deploiement.

Etape 12 : Integrer Tailwind avec un design system Figma

Pour les projets ou un designer fournit un fichier Figma, exportez les tokens (couleurs, espacements, typographie) via le plugin Figma Tokens, puis convertissez-les en variables @theme Tailwind via le script figma-tokens-to-tailwind. Le designer continue a travailler sur Figma, le developpeur recupere automatiquement les nouvelles couleurs et tailles dans le CSS sans editer manuellement la config. Cette boucle reduit les desynchros design-code, principale source de friction dans les projets a deux mains entre Dakar et Paris.

Documentez vos composants reutilisables dans Storybook ou Histoire (alternative legere pour Vue), avec les variants visibles cote a cote. Un nouveau developpeur sur le projet ouvre Storybook, voit toutes les briques, et evite de reimplementer un bouton qui existe deja sous un autre nom.

Etape 13 : Suivre les updates de Tailwind sereinement

Tailwind sort une mise a jour majeure tous les 12 a 18 mois et plusieurs minor releases entre. Abonnez-vous au flux GitHub releases du depot tailwindlabs/tailwindcss et lisez les changelogs avant chaque upgrade. Les breaking changes restent rares et bien documentes : entre v3 et v4, la migration prend 30 minutes pour un projet moyen via le codemod officiel npx @tailwindcss/upgrade. Verrouillez la version dans package.json avec ~4.x.y plutot que ^4.x.y pour eviter une montee mineure non testee en plein deploiement vendredi soir.