Tailwind CSS : installation

Tailwind CSS est un framework CSS « utilitaire » : on compose l’interface avec de petites classes (flex, p-4, text-lg) directement dans le HTML. Cette rubrique décrit Tailwind 4, dont la configuration se fait en CSS. Les exemples utilisent des noms génériques.

Principe

Tailwind analyse les fichiers du projet, repère les noms de classes, et ne génère que le CSS correspondant : la feuille finale est petite, quel que soit le nombre de classes disponibles.

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

Prérequis

Node.js récent (voir Node.js : installation). Tailwind 4 cible les navigateurs modernes (Safari 16.4+, Chrome 111+, Firefox 128+) : pour des navigateurs plus anciens, rester sur Tailwind 3.

Avec un projet Astro

npm install tailwindcss @tailwindcss/vite

astro.config.mjs :

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

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

src/styles/global.css :

@import 'tailwindcss';

Importer le fichier dans le layout : import '../styles/global.css'; (voir Astro : composants et layouts).

Avec Vite (React, Vue, Svelte…)

npm install tailwindcss @tailwindcss/vite

vite.config.js :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

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

src/index.css : @import "tailwindcss";, importé dans main.jsx (voir React : installation).

Avec Next.js (PostCSS)

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs :

const config = { plugins: { '@tailwindcss/postcss': {} } };
export default config;

app/globals.css : @import "tailwindcss"; (voir Next.js : styles et assets). Les projets créés avec create-next-app peuvent l’installer à la création.

Sans framework : la CLI

npm install tailwindcss @tailwindcss/cli

src/entree.css :

@import 'tailwindcss';

npx @tailwindcss/cli -i ./src/entree.css -o ./public/style.css --watch      # développement
npx @tailwindcss/cli -i ./src/entree.css -o ./public/style.css --minify     # production

index.html : <link rel="stylesheet" href="/style.css">.

Détection des fichiers

Tailwind 4 détecte automatiquement les fichiers sources (en ignorant ceux de .gitignore). Pour ajouter une source non détectée :

@import 'tailwindcss';
@source '../node_modules/ma-bibliotheque-ui';
@source '../../autre-dossier/gabarits';

Ne jamais construire un nom de classe par concaténation ("bg-" + couleur) : Tailwind ne le verrait pas. Écrire les noms complets :

const couleurs = { rouge: 'bg-red-600', vert: 'bg-green-600' }; // correct
const classe = couleurs[etat];

Éditeur

Extension Tailwind CSS IntelliSense (VS Code) : complétion et aperçu des classes.
Plugin prettier-plugin-tailwindcss : trie les classes dans un ordre standard.

npm install -D prettier prettier-plugin-tailwindcss

.prettierrc :

{ "plugins": ["prettier-plugin-tailwindcss"] }

Vérifier

<h1 class="text-3xl font-bold text-blue-600 underline">Bonjour</h1>

Le titre doit apparaître en grand, gras, bleu et souligné. Sinon, voir Dépannage.

Dépannage

Symptôme	Piste
Aucune classe n’a d’effet	`@import "tailwindcss";` absent, fichier CSS non importé, plugin non déclaré
Une classe précise n’a pas d’effet	Nom construit dynamiquement, ou fichier non détecté (`@source`)
`Cannot find module '@tailwindcss/vite'`	`npm install @tailwindcss/vite`
Le build échoue avec PostCSS	Utiliser `@tailwindcss/postcss` (et non l’ancien plugin `tailwindcss`)
Directives `@tailwind base;` ignorées	Syntaxe de la v3 : remplacer par `@import "tailwindcss";`
CSS très volumineux	Fichier généré en mode développement : construire avec `--minify` / `npm run build`