# Tailwind CSS : maîtriser les classes utilitaires et construire une interface responsive pas à pas

> Tailwind CSS pas à pas : installation avec Vite, classes utilitaires, Flexbox, Grid, responsive, dark mode, personnalisation du thème et déploiement.

- URL : https://guides-numeriques.fr/developpement/tailwind-css/
- Thématique : Développement web & mobile
- Mis à jour : 2026-09-26
- Formation associée : [Maîtriser Tailwind CSS : De la théorie au déploiement](https://espritacademique.com/formations/maitriser-tailwind-css-de-la-theorie-au-deploiement/)

## L'essentiel

- Tailwind CSS est un framework CSS « utility-first » : on met en forme les éléments en combinant de petites classes directement dans le HTML, sans écrire de feuille de style dédiée.
- Chaque classe utilitaire applique une seule propriété CSS, par exemple p-4 pour un padding de 1rem ou text-center pour centrer le texte.
- Le responsive se gère avec des préfixes de points de rupture (sm:, md:, lg:, xl:) appliqués selon une logique mobile first.
- Tailwind ne génère dans le fichier final que les classes réellement utilisées dans le code, ce qui produit une feuille de style légère.
- Tailwind ne remplace pas la connaissance du CSS : chaque classe correspond à une propriété CSS qu'il faut comprendre pour bien l'utiliser.

**Tailwind CSS** est un framework CSS qui permet de mettre en forme une page directement dans le HTML, en combinant de petites classes utilitaires comme `flex`, `p-4`, `text-lg` ou `bg-blue-600`. Au lieu d'inventer des noms de classes et d'écrire une feuille de style à côté, vous composez le design élément par élément, avec un système d'espacements, de couleurs et de tailles cohérent.

Ce tutoriel s'adresse aux développeurs et intégrateurs qui connaissent les bases du HTML et du CSS, ainsi qu'aux designers qui veulent coder leurs maquettes. Vous y verrez comment installer Tailwind dans un projet réel, créer une carte, une barre de navigation et une grille, gérer le responsive, les états interactifs et le mode sombre, personnaliser le thème, puis déployer votre site.

## Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS open source dit **utility-first** : il fournit des milliers de classes qui appliquent chacune une seule règle CSS. On construit l'apparence d'un élément en assemblant ces classes dans son attribut `class`. À la compilation, Tailwind analyse vos fichiers et ne génère que les styles réellement utilisés.

Concrètement, là où vous écririez en CSS classique :

```css
.bouton {
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
}
```

vous écrivez avec Tailwind, directement dans le HTML :

```html
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
  S'inscrire
</button>
```

Contrairement à Bootstrap, Tailwind ne fournit **aucun composant tout fait** (bouton, carte, fenêtre modale). Il donne des briques de bas niveau : c'est ce qui permet d'obtenir un design sur mesure, sans l'aspect « déjà vu » des sites construits avec un kit de composants.

## Pourquoi utiliser Tailwind CSS ?

Les avantages que nous constatons en formation et en projet :

- **Vitesse d'intégration** : plus de va-et-vient entre le HTML et la feuille de style, plus de temps perdu à nommer des classes.
- **Cohérence visuelle** : espacements, couleurs, tailles de police et ombres suivent une échelle commune. Impossible d'avoir 13 px ici et 14 px là par inadvertance.
- **Pas d'effets de bord** : modifier les classes d'un élément ne casse rien ailleurs, contrairement à une règle CSS globale.
- **Responsive et états intégrés** : `md:flex` ou `hover:bg-blue-700` se lisent directement sur l'élément concerné.
- **CSS final léger** : seules les classes utilisées sont générées.
- **Adapté aux composants** : avec React, Vue, Svelte ou Astro, chaque composant porte son propre style.

Les limites existent aussi : un HTML plus chargé, une phase d'apprentissage du vocabulaire des classes, et une dépendance à un outil de compilation. Tailwind n'est pas non plus un raccourci pour éviter d'apprendre le CSS : si vous ne savez pas ce que fait `justify-between`, la classe ne vous aidera pas. Si nécessaire, commencez par notre guide pour [apprendre CSS](https://guides-numeriques.fr/developpement/apprendre-css/).

## Installer Tailwind CSS dans un projet

### Tester sans installation

Pour découvrir Tailwind en quelques secondes, ajoutez le script navigateur officiel dans le `<head>` d'une page HTML :

```html
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
```

Toutes les classes fonctionnent immédiatement. Réservez cette méthode à l'expérimentation : en production, les styles doivent être compilés.

### Installer Tailwind avec Vite

Pour un projet réel, la méthode la plus simple passe par Vite. Dans un terminal, avec Node.js installé :

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

Ajoutez le plugin dans `vite.config.js` :

```javascript
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});
```

Puis importez Tailwind en tête de votre fichier CSS principal (par exemple `src/style.css`) :

```css
@import "tailwindcss";
```

Lancez `npm run dev` : les classes Tailwind sont disponibles dans tous vos fichiers. Avec Next.js, l'assistant `create-next-app` propose d'installer Tailwind directement.

Les projets plus anciens, sous Tailwind 3, utilisent un fichier `tailwind.config.js` et des directives `@tailwind base`, `@tailwind components` et `@tailwind utilities`. Vous les croiserez encore souvent : la logique des classes est la même, seule la configuration change.

### Configurer VS Code

Deux outils changent le confort de travail :

- l'extension **Tailwind CSS IntelliSense**, qui propose l'autocomplétion des classes, affiche le CSS correspondant au survol et signale les classes en conflit ;
- le plugin **prettier-plugin-tailwindcss**, qui trie automatiquement les classes dans un ordre cohérent à chaque enregistrement.

## Utiliser Tailwind CSS : les étapes pour construire une interface


**Schéma — Construire une interface avec Tailwind CSS : les étapes**

1. **Classes utilitaires** : Grammaire propriété-valeur : p-4, text-lg
2. **Première carte** : bg-white, rounded-2xl, p-6, shadow-md
3. **Flexbox** : flex, items-center, justify-between
4. **Grille** : grid, colonnes et gap
5. **Responsive** : Mobile sans préfixe, puis md: et lg:
6. **États et thème** : hover:, focus:, @theme et mode sombre


### Étape 1 — Comprendre la logique des classes utilitaires

Les noms de classes suivent une grammaire régulière : **propriété-valeur**. Une fois quelques règles comprises, vous devinez la plupart des classes sans documentation.

| Famille | Exemples | Équivalent CSS |
|---|---|---|
| Espacement | `p-4`, `px-6`, `mt-8`, `gap-4` | padding, margin, gap (1 unité = 0,25rem) |
| Dimensions | `w-full`, `max-w-md`, `h-screen` | width, max-width, height |
| Typographie | `text-lg`, `font-bold`, `leading-relaxed` | font-size, font-weight, line-height |
| Couleurs | `bg-slate-100`, `text-blue-600`, `border-red-500` | couleurs de fond, de texte, de bordure |
| Bordures et ombres | `rounded-xl`, `border`, `shadow-md` | border-radius, border, box-shadow |
| Mise en page | `flex`, `grid`, `items-center`, `justify-between` | display, align-items, justify-content |

L'échelle d'espacement repose sur un pas de **0,25rem** : `p-1` vaut 0,25rem, `p-4` vaut 1rem, `p-8` vaut 2rem. Les couleurs vont de 50 (très clair) à 950 (très foncé). Pour une valeur hors échelle, utilisez la notation entre crochets : `w-[327px]`, `bg-[#0f766e]`. Notre conseil : limitez ces valeurs arbitraires, sinon vous perdez la cohérence qui fait l'intérêt du framework.

### Étape 2 — Créer une première carte

```html
<article class="max-w-sm rounded-2xl bg-white p-6 shadow-md">
  <img src="images/atelier.jpg" alt="Atelier de formation" class="mb-4 h-40 w-full rounded-xl object-cover">
  <h2 class="text-xl font-bold text-slate-900">Atelier Tailwind</h2>
  <p class="mt-2 text-slate-600">Construire une interface responsive en une après-midi.</p>
  <a href="#" class="mt-4 inline-block rounded-lg bg-teal-600 px-4 py-2 font-semibold text-white">
    Découvrir
  </a>
</article>
```

Lisez les classes de gauche à droite : largeur maximale, coins arrondis, fond blanc, marge intérieure, ombre. Chaque décision de design est visible sur l'élément lui-même, sans ouvrir d'autre fichier.

### Étape 3 — Aligner avec Flexbox : la barre de navigation

```html
<header class="flex items-center justify-between border-b px-6 py-4">
  <a href="/" class="text-lg font-bold">MonSite</a>
  <nav class="flex gap-6 text-sm font-medium">
    <a href="#cours" class="text-slate-700">Cours</a>
    <a href="#tarifs" class="text-slate-700">Tarifs</a>
    <a href="#contact" class="text-slate-700">Contact</a>
  </nav>
</header>
```

`flex` active Flexbox, `items-center` centre verticalement, `justify-between` repousse le logo et le menu aux deux extrémités, et `gap-6` espace les liens. Ce sont exactement les propriétés CSS `display`, `align-items`, `justify-content` et `gap`.

### Étape 4 — Construire une grille avec CSS Grid

```html
<section class="grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-xl bg-white p-6 shadow">Carte 1</article>
  <article class="rounded-xl bg-white p-6 shadow">Carte 2</article>
  <article class="rounded-xl bg-white p-6 shadow lg:col-span-1 sm:col-span-2">Carte 3</article>
</section>
```

`grid-cols-3` crée trois colonnes de largeur égale, `col-span-2` fait s'étendre un élément sur deux colonnes. Utilisez Flexbox pour aligner des éléments sur une ligne, et Grid pour des mises en page en deux dimensions.

### Étape 5 — Gérer le responsive avec Tailwind

Le **responsive Tailwind** repose sur des préfixes de points de rupture. La logique est **mobile first** : une classe sans préfixe s'applique à toutes les tailles, une classe préfixée s'applique à partir de la largeur indiquée.

| Préfixe | Largeur minimale | Usage typique |
|---|---|---|
| (aucun) | 0 | Téléphones, style de base |
| `sm:` | 640 px | Grands téléphones en paysage |
| `md:` | 768 px | Tablettes |
| `lg:` | 1024 px | Ordinateurs portables |
| `xl:` | 1280 px | Écrans larges |
| `2xl:` | 1536 px | Très grands écrans |

Ainsi, `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` affiche une colonne sur mobile, deux sur tablette, trois sur ordinateur. De même, `hidden md:flex` masque un menu sur mobile et l'affiche à partir de 768 px. L'erreur classique consiste à écrire `sm:` en pensant « sur petit écran » : il signifie « à partir de 640 px ».

### Étape 6 — Gérer les états : hover, focus, group et peer

Les préfixes d'état appliquent une classe seulement dans une situation donnée :

```html
<button class="rounded-lg bg-teal-600 px-4 py-2 text-white transition
               hover:bg-teal-700 focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-teal-600 disabled:opacity-50">
  Valider
</button>
```

Deux variantes permettent de styler un élément selon l'état d'un autre :

- **group** : ajoutez `group` au parent, puis `group-hover:` aux enfants. Survoler toute la carte change alors la couleur de son titre.
- **peer** : ajoutez `peer` à un élément, puis `peer-invalid:` ou `peer-checked:` à un élément frère qui le suit.

```html
<a href="#" class="group block rounded-xl p-6 shadow hover:shadow-lg">
  <h3 class="font-bold group-hover:text-teal-600">Voir le cours</h3>
</a>

<input type="email" class="peer rounded border px-3 py-2" placeholder="E-mail">
<p class="hidden text-sm text-red-600 peer-invalid:block">Adresse e-mail invalide.</p>
```

Ne supprimez jamais le contour de focus sans le remplacer : les personnes qui naviguent au clavier en ont besoin pour savoir où elles se trouvent.

### Étape 7 — Personnaliser le thème et activer le mode sombre

Dans les versions récentes, la **configuration Tailwind** se fait directement dans le fichier CSS, avec la directive `@theme`. Chaque variable déclarée crée les classes correspondantes :

```css
@import "tailwindcss";

@theme {
  --color-marque-500: #0d9488;
  --color-marque-700: #0f766e;
  --font-titre: "Poppins", sans-serif;
  --breakpoint-3xl: 1920px;
}
```

Vous disposez alors de `bg-marque-500`, `text-marque-700`, `font-titre` et du préfixe `3xl:`. Sous Tailwind 3, les mêmes personnalisations se déclarent dans l'objet `theme.extend` du fichier `tailwind.config.js`.

Pour le **mode sombre**, le préfixe `dark:` s'applique par défaut selon la préférence du système d'exploitation : `bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100`. Pour laisser l'utilisateur choisir avec un bouton, redéfinissez la variante afin qu'elle dépende d'une classe `dark` posée sur l'élément `html` :

```css
@custom-variant dark (&:where(.dark, .dark *));
```

Un script de quelques lignes ajoute ou retire alors cette classe et mémorise le choix.

> **Formation recommandée** : [Maîtriser Tailwind CSS : De la théorie au déploiement](https://espritacademique.com/formations/maitriser-tailwind-css-de-la-theorie-au-deploiement/) — 2h20 de vidéo, 39 €.

## Organiser son code Tailwind dans un projet réel

Sur une page isolée, répéter des classes ne pose pas de problème. Sur un site entier, il faut une stratégie.

**Les composants d'abord.** Avec React, Vue, Astro ou un moteur de gabarits, créez un composant `Bouton` ou `Carte` qui contient ses classes. La liste n'est écrite qu'une fois, et chaque utilisation reste courte.

**Les boucles pour les cartes dynamiques.** Quand les cartes proviennent de données, générez-les avec une boucle plutôt que de copier le HTML :

```jsx
const cours = [
  { id: 1, titre: "Flexbox", niveau: "Débutant" },
  { id: 2, titre: "CSS Grid", niveau: "Intermédiaire" },
];

export function ListeCours() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      {cours.map((c) => (
        <article key={c.id} className="rounded-xl bg-white p-6 shadow">
          <h3 className="font-bold">{c.titre}</h3>
          <span className="text-sm text-slate-500">{c.niveau}</span>
        </article>
      ))}
    </div>
  );
}
```

**La fusion de classes.** Quand un composant accepte des classes supplémentaires, deux classes contradictoires peuvent coexister (`px-4` et `px-6`). La bibliothèque **tailwind-merge**, souvent associée à **clsx**, résout ces conflits en ne gardant que la dernière :

```javascript
import { twMerge } from "tailwind-merge";

twMerge("px-4 py-2 bg-teal-600", "px-6"); // "py-2 bg-teal-600 px-6"
```

**@apply avec parcimonie.** La directive `@apply` regroupe des utilitaires dans une classe CSS classique. Elle reste utile pour styler du contenu que vous ne contrôlez pas (texte issu d'un CMS, par exemple), mais l'utiliser partout revient à réécrire du CSS traditionnel avec une étape de plus.

## Déployer un site Tailwind CSS

Avant la mise en ligne, lancez `npm run build` : Vite compile le projet dans un dossier `dist` qui contient une feuille de style réduite aux classes utilisées. Ce dossier peut être hébergé sur n'importe quel serveur statique.

Le déploiement le plus simple passe par un dépôt Git :

1. Poussez votre projet sur GitHub. Si vous ne maîtrisez pas encore les commandes, notre guide pour [apprendre Git et GitHub](https://guides-numeriques.fr/developpement/git-github/) vous accompagne.
2. Créez un compte sur une plateforme d'hébergement comme Vercel et importez le dépôt.
3. La plateforme détecte Vite (ou Next.js), exécute la compilation et publie le site sur une adresse publique.
4. Chaque nouveau `git push` redéploie automatiquement le site.

## Les erreurs fréquentes avec Tailwind CSS

| Erreur | Cause | Solution |
|---|---|---|
| Une classe n'a aucun effet | Classe construite dynamiquement (`bg-${couleur}-500`) : Tailwind ne peut pas la détecter | Écrire les noms de classes complets, par exemple via un objet de correspondance |
| Aucun style dans un fichier | Fichier hors du périmètre analysé par Tailwind | Déclarer le dossier avec `@source` (ou `content` sous Tailwind 3) |
| Le responsive semble inversé | `sm:` compris comme « petit écran » | Styler d'abord le mobile sans préfixe, puis ajouter `md:`, `lg:` |
| Deux classes se contredisent | `p-4` et `p-6` sur le même élément | Supprimer le doublon, ou utiliser tailwind-merge dans les composants |
| Le mode sombre ne se déclenche pas au clic | Variante `dark:` toujours liée au système | Redéfinir la variante avec `@custom-variant` et une classe `dark` |
| Mise en page cassée sur mobile | Balise meta viewport absente | Ajouter `<meta name="viewport" content="width=device-width, initial-scale=1.0">` |
| Site lent en production | Script CDN utilisé à la place d'une compilation | Installer Tailwind avec Vite ou la CLI et compiler |

## Tailwind vs CSS classique vs Bootstrap : comparaison

| Critère | CSS classique | Bootstrap | Tailwind CSS |
|---|---|---|---|
| Approche | Feuille de style écrite à la main | Composants prêts à l'emploi | Classes utilitaires à combiner |
| Design sur mesure | Total | Limité sans personnalisation poussée | Total, dans une échelle cohérente |
| Vitesse pour un prototype | Lente | Très rapide | Rapide |
| Poids du CSS final | Selon votre code | Important si non optimisé | Réduit aux classes utilisées |
| Composants JavaScript inclus | Non | Oui (modales, carrousels, menus) | Non |
| Courbe d'apprentissage | Base indispensable | Faible | Moyenne, suppose de connaître le CSS |

Le débat **Tailwind vs CSS** est en partie un faux débat : Tailwind génère du CSS et en exige la compréhension. Bootstrap reste pertinent pour un back-office ou un prototype où l'apparence standard convient, comme nous l'expliquons dans notre guide [Bootstrap 5](https://guides-numeriques.fr/developpement/bootstrap-5/). Tailwind prend l'avantage dès que vous partez d'une maquette personnalisée, surtout dans une application en composants comme celles construites avec [React et Next.js](https://guides-numeriques.fr/developpement/react-nextjs/).


**Schéma — Tailwind CSS, CSS classique ou Bootstrap ?**

| CSS classique | Bootstrap | Tailwind CSS |
|---|---|---|
| Feuille écrite à la main | Composants prêts à l'emploi | Classes utilitaires à combiner |
| Design sur mesure total | Composants JavaScript inclus | Design sur mesure cohérent |
| Prototype lent | Prototype très rapide | CSS réduit aux classes utilisées |


## Comment apprendre Tailwind CSS efficacement ?

Avec des bases en HTML et CSS, voici le parcours que nous recommandons :

1. **Premières heures** : découverte avec le script CDN, logique utility-first, espacements, couleurs, typographie. Reproduisez une carte ou un bouton trouvés sur un site que vous aimez.
2. **Premiers jours** : Flexbox, Grid, responsive, états `hover` et `focus`, variantes `group` et `peer`.
3. **Première semaine** : installation avec Vite, extension IntelliSense, personnalisation du thème, mode sombre.
4. **Ensuite** : un projet complet (page d'accueil, navigation, cartes générées dynamiquement, menu latéral animé), puis son déploiement.

Pour être guidé du premier utilitaire à la mise en ligne, [la formation vidéo pour maîtriser Tailwind CSS en projet réel](https://espritacademique.com/formations/maitriser-tailwind-css-de-la-theorie-au-deploiement/) d'EspritAcadémique dure 2 h 20 et ne demande aucun prérequis. Elle couvre notamment :

- la philosophie utility-first et la création de vos premières cartes ;
- les mises en page avec Flexbox et CSS Grid, et le responsive par points de rupture ;
- les états `hover` et `focus`, les variantes `group` et `peer` ;
- la personnalisation du thème, les directives et le mode sombre ;
- la construction d'un projet dans VS Code : barre de navigation, page d'accueil, cartes dynamiques, fusion de classes et menu latéral animé ;
- le déploiement du site avec GitHub et Vercel.

## En résumé

Tailwind CSS remplace l'écriture d'une feuille de style par l'assemblage de classes utilitaires cohérentes, directement dans le HTML. Installez-le avec Vite, apprenez la grammaire des classes, construisez vos mises en page avec Flexbox et Grid, pensez mobile first avec les préfixes responsive, puis personnalisez le thème avec `@theme`. Organisez votre code en composants, et gardez en tête que chaque classe traduit une propriété CSS qu'il faut comprendre.

## Sources et documentation officielle

- [Installing Tailwind CSS with Vite (documentation Tailwind CSS)](https://tailwindcss.com/docs/installation/using-vite)
- [Styling with utility classes (documentation Tailwind CSS)](https://tailwindcss.com/docs/styling-with-utility-classes)
- [Responsive design (documentation Tailwind CSS)](https://tailwindcss.com/docs/responsive-design)

## Questions fréquentes

### Faut-il connaître le CSS avant d'apprendre Tailwind CSS ?

Oui, c'est fortement recommandé. Tailwind ne fait que proposer des raccourcis vers des propriétés CSS : flex, grid, padding, marges, positionnement. Sans comprendre le modèle de boîte, Flexbox ou Grid, vous saurez écrire des classes mais pas pourquoi une mise en page ne fonctionne pas. Quelques semaines de bases en CSS rendent l'apprentissage de Tailwind beaucoup plus rapide.

### Tailwind CSS est-il gratuit ?

Oui. Tailwind CSS est un projet open source sous licence MIT, utilisable gratuitement dans des projets personnels comme commerciaux. L'équipe qui le développe commercialise en revanche des produits complémentaires, comme des bibliothèques de composants et de modèles prêts à l'emploi, qui restent facultatifs pour utiliser le framework.

### Tailwind CSS alourdit-il le code HTML ?

Les attributs class deviennent plus longs, c'est la principale critique faite à Tailwind. En contrepartie, la feuille de style finale est réduite aux seules classes utilisées. Pour garder un code lisible, on découpe l'interface en composants réutilisables (React, Vue, Blade, Astro…) : la longue liste de classes n'est alors écrite qu'une seule fois par composant.

### Peut-on utiliser Tailwind CSS avec React ou Next.js ?

Oui, c'est même l'un des usages les plus répandus. L'assistant de création de projet Next.js propose d'installer Tailwind CSS automatiquement, et l'intégration avec Vite pour React tient en quelques lignes. Dans les composants JSX, les classes Tailwind s'écrivent simplement dans l'attribut className.

### Combien de temps faut-il pour apprendre Tailwind CSS ?

Avec des bases en CSS, quelques heures suffisent pour comprendre la logique utility-first et créer une première page. Comptez une à deux semaines de pratique sur un projet réel pour mémoriser les classes courantes, maîtriser le responsive, les états et la personnalisation du thème. L'extension IntelliSense de VS Code accélère nettement cette phase.

### Peut-on utiliser Tailwind CSS avec un CDN ?

Oui, pour tester ou prototyper : Tailwind fournit un script navigateur qui génère les styles à la volée. Il est pratique pour découvrir le framework sans installation, mais il n'est pas prévu pour la production, car il alourdit la page et calcule les styles dans le navigateur. Pour un vrai site, installez Tailwind avec son outil de compilation.