💨 Tailwind CSS – Le Guide Ultime

Tailwind CSS est un framework CSS Utility-First (centré sur les "utilitaires").

C'est une philosophie radicalement opposée aux frameworks de "Composants" comme Bootstrap ou Foundation. Il ne fournit aucun composant pré-fait (pas de .card, pas de .navbar).

À la place, il fournit des "briques de Lego" (les classes utilitaires) qui vous permettent de construire n'importe quel design directement dans votre HTML.

La Différence Fondamentale

<button class="btn btn-primary">
  Cliquez ici
</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Cliquez ici
</button>

La première réaction de tout le monde : "Mon HTML est illisible !" ou "C'est juste des 'inline styles' !".

Cette philosophie a 3 arguments principaux :

1. "Ce n'est PAS du 'inline style'"

Les styles "inline" (style="color: blue;") sont un cauchemar pour 3 raisons que Tailwind résout :

2. "Ne quittez jamais votre HTML" (Co-location)

Le problème du CSS traditionnel est le "context switching" (changement de contexte) :
1. Vous écrivez du HTML (<div class="user-card">).
2. Vous ouvrez style.css.
3. Vous trouvez .user-card.
4. Vous modifiez une propriété.
5. Vous réalisez que vous avez cassé 3 autres pages qui utilisaient .user-card.

Avec Tailwind, le style est **local** à l'élément. Vous voyez ce qu'il fait, et vous le modifiez sans peur de casser autre chose.

3. "Extraire" est facile (Abstractions)

Quand un "bouton" devient trop verbeux, vous ne le laissez pas comme ça. Vous l'extrayez dans un composant (React, Vue, Blade, etc.), pas dans une classe CSS. Le HTML reste la "source de vérité".

<!-- A ne pas faire : -->
<button class="bg-blue-500 ... rounded">Btn 1</button>
<button class="bg-blue-500 ... rounded">Btn 2</button>

<!-- A faire (Exemple en React) : -->
<PrimaryButton>Btn 1</PrimaryButton>
<PrimaryButton>Btn 2</PrimaryButton>
<!-- (Où PrimaryButton.js contient la longue classe) -->

Tailwind n'est pas un fichier .css que vous téléchargez. C'est un outil de build (une dépendance npm) qui s'exécute via PostCSS.

Processus d'Installation (Simplifié)

1. Installer (via npm) :

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

2. Configurer tailwind.config.js : (Généré par la commande `init`)
   C'est le fichier le plus important. C'est ici que vous activez le JIT Engine (Just-in-Time).

   module.exports = {
     // Le "JIT Engine" est le mode par défaut
     // Il scanne vos fichiers pour ne générer QUE le CSS utilisé
     content: [
       "./src/**/*.{html,js,jsx,ts,tsx,vue}", // Adaptez à votre projet
     ],
     theme: {
       extend: {}, // C'est ici qu'on personnalise (voir 9.1)
     },
     plugins: [],
   }
   

3. Configurer votre CSS source (ex: input.css) :
   Vous créez un fichier CSS qui utilise les directives @tailwind.

   @tailwind base;     /* Injecte les "resets" de base */
   @tailwind components; /* Injecte les classes de composants (optionnel) */
   @tailwind utilities;  /* Injecte TOUTES les classes utilitaires (p-4, etc) */
   

4. Lancer le Build :
   Vous lancez une commande (souvent npm run dev) qui "watch" (surveille) votre input.css et vos fichiers HTML/JS.
   npx tailwindcss -i ./input.css -o ./output.css --watch
   À chaque fois que vous ajoutez p-4 dans votre HTML, le JIT le voit et ajoute .p-4 { padding: 1rem; } au fichier output.css en quelques millisecondes. (Voir 11.1).

Les "utilities" sont le cœur de Tailwind. Ce sont des classes CSS atomiques, hautement composables, qui ne font qu'une seule chose.

Syntaxe de base (Catégorie-Valeur)

La plupart des classes suivent un schéma : [propriété]-[valeur].
Ex: bg-blue-500 -> background-color: ...
Ex: p-4 -> padding: 1rem (4 est une "clé" du design system, pas 4px)
Ex: font-bold -> font-weight: 700

Exemples de Catégories Courantes

Flexbox (display: flex) est le cheval de bataille de Tailwind pour l'alignement 1D. Les classes sont très intuitives.

Classes Flexbox Courantes

Exemple : Un Navbar

Construire un navbar simple avec un logo à gauche et des liens à droite.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    
    <!-- LOGO (Gauche) -->
    <div class="text-white font-bold text-xl">
      MonLogo
    </div>
    
    <!-- LIENS (Droite) -->
    <div class="flex space-x-4"> <!-- space-x-4 ajoute une marge entre les enfants -->
      <a href="#" class="text-gray-300 hover:text-white">Accueil</a>
      <a href="#" class="text-gray-300 hover:text-white">Profil</a>
      <a href="#" class="text-gray-300 hover:text-white">Déconnexion</a>
    </div>
  </div>
</nav>

Classes clés utilisées :
flex: Active le conteneur.
justify-between: Pousse le logo (gauche) et les liens (droite) aux extrémités.
items-center: Centre verticalement le logo et les liens (s'ils n'ont pas la même hauteur).
space-x-4: Ajoute margin-left: 1rem à tous les liens (sauf le premier).

Grid (display: grid) est l'outil pour les layouts 2D (lignes et colonnes). C'est parfait pour les galeries, les layouts de page, ou les dashboards.

Classes Grid Courantes

Exemple : Une galerie d'articles (Responsive)

Afficher une liste de "cards" : 1 colonne sur mobile, 3 colonnes sur desktop.

<div class="p-8">
  <!--
    Conteneur de la Grille :
    - Affiche "grid"
    - 1 colonne par défaut (Mobile)
    - 3 colonnes à partir du breakpoint "md" (desktop)
    - 1.5rem (24px) de "gap" (gouttière)
  -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    
    <!-- Card 1 -->
    <div class="bg-white rounded-lg shadow-lg">
      <!-- ... contenu de la card ... -->
    </div>
    
    <!-- Card 2 -->
    <div class="bg-white rounded-lg shadow-lg">
      <!-- ... contenu de la card ... -->
    </div>
    
    <!-- Card 3 -->
    <div class="bg-white rounded-lg shadow-lg">
      <!-- ... contenu de la card ... -->
    </div>
    
  </div>
</div>

C'est la plus grande force de Tailwind. Au lieu d'écrire des Media Queries @media dans votre CSS, vous appliquez des préfixes à vos classes utilitaires.

L'Approche "Mobile First"

Tailwind est "Mobile-First" par défaut. Les classes sans préfixe (ex: p-4) s'appliquent à *toutes* les tailles d'écran. Les classes *avec* préfixe (ex: md:p-8) ne s'appliquent qu'à partir de ce breakpoint (min-width).

Les Breakpoints (Points d'arrêt) par défaut

Exemple : Une "Card" Responsive

Imaginons une card qui doit :
1. (Mobile) S'empiler verticalement (flex-col).
2. (Desktop) S'afficher horizontalement (flex-row).

<!-- 
  Conteneur de la Card :
  - Par défaut (mobile) : 'flex' et 'flex-col'
  - A partir de 'lg:' (1024px) : 'flex-row' (écrase le 'flex-col')
-->
<div class="flex flex-col lg:flex-row bg-white rounded-lg shadow-lg">
  
  <!-- Image -->
  <img class="w-full lg:w-48 ..." />
  
  <!-- Contenu -->
  <div class="p-6">
    <!--
      Titre :
      - Par défaut (mobile) : text-2xl
      - A partir de 'lg:' (1024px) : text-3xl
    -->
    <h3 class="text-2xl lg:text-3xl font-bold">
      Mon Titre
    </h3>
    <p class="text-gray-700 mt-2">
      Mon contenu de card...
    </p>
  </div>
</div>

Tout comme le responsive, Tailwind gère les "états" (pseudo-classes) avec des préfixes.

States Courants

• hover: : Quand la souris survole. (Ex: hover:bg-blue-700)
• focus: : Quand l'élément a le focus (clavier). (Ex: focus:ring-2)
• active: : Quand on clique (ex: active:scale-95)
• disabled: : Quand l'élément (ex: <button>) a l'attribut disabled. (Ex: disabled:opacity-50)
• first: / last: : Cible le premier/dernier enfant.

Le "Group" (group-hover)

C'est un des plus puissants. Comment changer un *enfant* quand on survole le *parent* ?

<!-- 1. Mettre 'group' sur le PARENT -->
<a href="#" class="group block bg-white rounded-lg p-4">
  
  <h3 class="text-lg font-bold
             text-gray-900 
             group-hover:text-blue-500"> <-- 2. Utiliser 'group-hover:' sur l'ENFANT
    Titre de la card
  </h3>
  
  <p class="text-gray-600">
    Contenu...
  </p>
</a>

Ici, le titre (<h3>) deviendra bleu quand on survole n'importe où sur la card (<a>).

Le "Dark Mode" (dark:)

Tailwind a un support natif pour le mode sombre. On l'active dans tailwind.config.js (darkMode: 'class') et on met la classe dark sur <html>.

Ensuite, on utilise le préfixe dark:.

<div class="bg-white text-black
            dark:bg-gray-900 dark:text-white">
  
  <p>
    Ce texte sera noir sur fond blanc (par défaut),
    et blanc sur fond noir (si le mode 'dark' est actif).
  </p>
  
</div>

Tailwind n'est pas fait pour être utilisé "tel quel". Il est fait pour être **configuré** pour votre Design System. Le fichier tailwind.config.js est le centre de contrôle.

theme vs theme.extend (CRUCIAL)

• Si vous modifiez theme.colors : Vous remplacez *toutes* les couleurs par défaut. (bg-blue-500 n'existera plus).
• Si vous modifiez theme.extend.colors : Vous ajoutez vos couleurs *en plus* de celles par défaut.

Règle : Toujours utiliser theme.extend, sauf cas très spécifique.

Exemple de tailwind.config.js (Commenté)

const colors = require('tailwindcss/colors')

module.exports = {
  // Le 'content' (ex-purge) dit au JIT où scanner
  content: [
    './src/**/*.{html,js,jsx,vue}',
  ],

  // Activer le mode sombre via une classe (ex: <html class="dark">)
  darkMode: 'class',

  theme: {
    // ----------------------------------------------------
    // Ici, on REMPLACE les valeurs par défaut
    // (A utiliser avec parcimonie)
    // ----------------------------------------------------
    fontFamily: {
      // Remplace la police "sans" par défaut
      'sans': ['Inter', 'system-ui', 'sans-serif'], 
    },
    
    // ----------------------------------------------------
    // Ici, on AJOUTE aux valeurs par défaut
    // (C'est ce qu'on fait 99% du temps)
    // ----------------------------------------------------
    extend: {
      // Ajoute nos propres couleurs "sémantiques"
      colors: {
        'primary': {
          '50': '#eff6ff',
          '100': '#dbeafe',
          '500': '#3b82f6', // On peut l'utiliser : bg-primary-500
          '900': '#1e3a8a',
        },
        'secondary': colors.amber, // Utilise la palette "amber"
      },
      
      // Ajoute un breakpoint "ultra large"
      screens: {
        '2xl': '1536px',
      },
      
      // Ajoute une taille de spacing custom
      spacing: {
        '128': '32rem', // On peut l'utiliser : p-128
      }
    },
  },

  // ----------------------------------------------------
  // Ajout de plugins
  // ----------------------------------------------------
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Parfois, vous *devez* écrire du CSS. Tailwind fournit des directives spéciales à utiliser dans votre fichier input.css.

1. @tailwind

C'est la directive la plus importante. Elle dit à Tailwind "injecte tes classes ici".

/* input.css */
@tailwind base;     /* Reset CSS (normalize.css) */
@tailwind components; /* Classes de base (ex: .container) */
@tailwind utilities;  /* Toutes les classes (p-4, flex, etc) */

2. @layer

Permet d'ajouter vos propres styles CSS *dans* le bon "layer" (couche) pour que la spécificité fonctionne (notamment avec les states et le responsive).

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

/* Vos styles custom viennent APRES les injections */
@layer base {
  /* Style de base pour les h1 */
  h1 {
    font-size: 2rem;
  }
}

@layer utilities {
  /* Crée une classe utilitaire 'flip-x' */
  .flip-x {
    transform: scaleX(-1);
  }
}

3. @apply (L'outil "controversé")

@apply permet de "factoriser" des classes Tailwind dans une classe CSS sémantique. C'est le "pont" entre le monde Utility-First et le monde "Composant".

Le Problème : Mon HTML de bouton est trop long et se répète.

La Solution @apply :

/* HTML */
<button class="btn btn-primary">Cliquez ici</button>

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* On extrait les utilitaires dans une classe */
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-primary {
    @apply bg-blue-500 text-white;
    @apply hover:bg-blue-700;
  }
}

Le Débat : C'est utile, mais si vous le faites trop, vous recréez juste Bootstrap. La "bonne pratique" est de préférer l'abstraction de composant (React/Vue) à @apply. Mais pour des styles simples et répétés (comme .btn), c'est très accepté.

L'ancien temps (avant 2021) : Tailwind générait *tout* son CSS (des milliers de classes) puis utilisait un outil (PurgeCSS) pour scanner le HTML et *supprimer* le CSS non utilisé au moment du "build" (compilation). C'était lent.

Aujourd'hui : Le Moteur JIT (Just-in-Time)

Le JIT (maintenant par défaut) inverse ce processus. Il ne génère **rien** par défaut. C'est un compilateur "à la volée".

Le Processus JIT (en 3 étapes)

1. Démarrage : Vous lancez npm run dev. Le fichier output.css est vide (il n'y a que le "base reset").
2. Développement (Scan) : Vous ouvrez index.html et vous tapez :
   <div class="bg-red-500"></div>
3. Génération (Millisecondes) :
   a. Le JIT (qui surveille vos fichiers) voit le string "bg-red-500".
   b. Il comprend "Ah, il veut la classe pour background-color: red-500".
   c. Il génère *juste cette classe* et l'injecte dans output.css.
   .bg-red-500 { ... }

Les "Arbitrary Values" (Valeurs arbitraires)

Le JIT est si puissant qu'il peut générer du CSS pour des valeurs qui n'existent *pas* dans le config, grâce à la notation [...].

<!--
  Le JIT va comprendre et générer :
  .top-\[5px\] { top: 5px; }
-->
<div class="top-[5px]">
  Positionné à 5px du haut.
</div>

<!--
  Le JIT va générer :
  .bg-\[\#bada55\] { background-color: #bada55; }
-->
<div class="bg-[#bada55]">
  Une couleur hexadécimale custom.
</div>

Le Résultat Final

Grâce au JIT, votre fichier CSS de production ne contient que *strictement* les classes que vous avez utilisées. Le fichier final est minuscule, souvent entre 5kb et 15kb (compressé), ce qui est imbattable en performance.

Tailwind est plus qu'un framework, c'est un écosystème d'outils officiels et communautaires qui s'intègrent parfaitement.

1. Tailwind UI (Officiel, Payant)

C'est la bibliothèque de "composants" officiels (payants). Mais ce n'est pas un npm install. C'est une collection de snippets HTML (copier/coller) magnifiquement designés, utilisant uniquement des classes Tailwind. Vous achetez l'accès aux exemples de code, que vous pouvez ensuite adapter.

2. Headless UI (Officiel, Gratuit)

C'est le compagnon *parfait* de Tailwind. C'est une bibliothèque de composants (Modals, Dropdowns, Toggles) totalement non-stylés et 100% accessibles (WAI-ARIA).
Il gère le JavaScript (ouvrir/fermer la modale, gérer le clavier) et vous laissez le soin de le styler avec des classes Tailwind.

<!-- Exemple Headless UI (React) -->
<Switch classNme={`${enabled ? 'bg-blue-600' : 'bg-gray-200'} ...`}>
  <span className={`${enabled ? 'translate-x-6' : 'translate-x-1'} ...`} />
</Switch>

3. Plugins Officiels

Des plugins à ajouter dans votre tailwind.config.js pour gérer des cas complexes.

• @tailwindcss/typography : (Le "Prose" plugin). Applique automatiquement des styles à du HTML brut (ex: un article de blog en Markdown).
  <div class="prose"> <h1>...</h1> <p>...</p> </div>
• @tailwindcss/forms : Applique un "reset" intelligent aux champs de formulaire (input, select) pour qu'ils soient faciles à styler avec des utilitaires.

Références Extérieures (Liens)