Pourquoi Tailwind CSS ?

Le framework utility-first qui change tout.

Imagine : au lieu d'écrire des classes CSS custom pour chaque élément, tu assembles des petites briques utilitaires directement dans ton HTML. Plus besoin de naviguer entre 15 fichiers CSS - tout est visible au même endroit.

Tailwind CSS est un framework CSS utility-first créé par Adam Wathan en 2017. Il est devenu le choix par défaut pour Next.js, React et la majorité des projets modernes.

1.1CSS classique vs Tailwind

En CSS traditionnel, tu crées des classes sémantiques et écris le style séparément :

<!-- Approche classique -->
<button class="btn-primary">Cliquer</button>

<style>
.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: #2563eb;
}
</style>

Avec Tailwind, tout est dans le HTML - chaque classe fait UNE chose :

<!-- Approche Tailwind -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-semibold
               hover:bg-blue-600 transition-colors">
  Cliquer
</button>

<!-- Pas de fichier CSS séparé ! -->

Ça peut sembler verbeux au début. Mais une fois habitué, tu ne voudras plus revenir en arrière. Pourquoi ? Parce que tu vois le design en lisant le HTML, sans jongler entre fichiers.

1.2Les avantages

Rapidité

Tu codes plus vite, pas de va-et-vient entre HTML et CSS. Le design se fait directement dans le markup.

Cohérence

Le système de design (spacing, couleurs, typo) est contraint par défaut. Fini les margin: 13px arbitraires.

CSS minimal

Tailwind ne génère que les classes utilisées. Un bundle CSS minuscule, même sur de gros projets.

Pas de conflits

Plus de cascade imprévisible ni de !important. Chaque classe est atomique et prévisible.

1.3Installation

Tailwind s'installe en quelques commandes selon ton projet :

# Avec Vite (React, Vue, etc.)
npm install tailwindcss @tailwindcss/vite
# Ajoute le plugin dans vite.config.ts

# Avec Next.js (déjà inclus depuis Next 13+)
npx create-next-app@latest  # Tailwind proposé par défaut

# Avec PostCSS (universel)
npm install tailwindcss postcss autoprefixer
npx tailwindcss init

1.4Configuration de base

Tailwind v4 simplifie drastiquement la configuration. Un seul import CSS suffit :

/* globals.css - Tailwind v4 */
@import "tailwindcss";

/* C'est tout ! Tailwind scanne automatiquement tes fichiers
   et génère uniquement les classes que tu utilises. */

/* Tu peux ajouter du CSS custom en dessous */
@layer base {
  body {
    @apply bg-white text-slate-900 antialiased;
  }
}

Tailwind v4 (2024+) a supprimé le fichier tailwind.config.js au profit de la configuration dans le CSS. On verra les détails au chapitre 7.

1.5L'autocomplétion indispensable

Installe l'extension Tailwind CSS IntelliSense dans VS Code. Elle te donne :

<!-- Tape "bg-" et l'extension propose : -->
<!-- bg-red-500, bg-blue-600, bg-slate-100... -->
<!-- Avec un aperçu de la couleur ! -->

<div class="bg-|">
  <!--     ↑ L'autocomplétion apparaît ici -->
</div>

<!-- Elle montre aussi le CSS généré au survol :
     "p-4" → padding: 1rem (16px)
     "text-lg" → font-size: 1.125rem; line-height: 1.75rem
-->

L'extension Tailwind CSS IntelliSense est non négociable. Sans elle, coder en Tailwind serait de la mémoire pure. Avec elle, tu as un compagnon qui connaît toutes les classes, leurs valeurs CSS et même les couleurs.

1.6Quand utiliser Tailwind ?

Idéal pour

• Applications React / Next.js / Vue
• Prototypage rapide
• Design systems et composants
• Projets avec un design custom
• Équipes qui veulent de la cohérence

Moins adapté

• Sites WordPress avec un thème existant
• Emails HTML (support limité)
• Projets où tu n'écris pas le HTML
• Apprentissage initial de CSS (apprends les bases d'abord !)

Important : Tailwind ne remplace pas la connaissance du CSS. Il l'accélère. Si tu ne comprends pas Flexbox, Grid ou le box model, commence par le parcours CSS avant celui-ci.

Résumé du chapitre : Tailwind CSS est un framework utility-first. Tu composes ton design avec des classes atomiques directement dans le HTML. C'est rapide, cohérent, léger en production, et parfaitement intégré aux frameworks modernes. Installe l'extension VS Code et c'est parti !