🌬️ TailwindCSS

Tailwind CSS est un framework utilitaire qui accélère la composition d'interfaces sans imposer de composants visuels prédéfinis.

Tailwind CSS v4 privilégie désormais une configuration directement dans le CSS : on importe Tailwind avec @import "tailwindcss";, sans tailwind.config.js obligatoire pour démarrer.

🛠️ Installation

Pour une intégration moderne via PostCSS, installez Tailwind et son plugin :

npm install -D tailwindcss @tailwindcss/postcss

Puis branchez le plugin dans PostCSS :

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

🛠️ Configuration v4

Dans votre feuille de style principale (app/globals.css, src/index.css, etc.), importez Tailwind :

@import "tailwindcss";

Aucun fichier tailwind.config.js n'est requis pour ce socle minimal.

🎨 Personnaliser le thème

Si vous avez besoin de tokens personnalisés, utilisez @theme directement dans le CSS :

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.18 259);
  --color-brand-700: oklch(0.49 0.16 259);
  --radius-card: 1rem;
}

📘 Utilisation

Mise en page basique

<div className="mx-auto max-w-5xl px-4">
  <div className="grid gap-4 md:grid-cols-2">
    <section className="rounded-lg bg-slate-100 p-4">
      <h2 className="mb-2 text-xl font-bold">Section 1</h2>
      <p className="text-slate-700">Contenu de la section</p>
    </section>
    <section className="rounded-lg bg-slate-100 p-4">
      <h2 className="mb-2 text-xl font-bold">Section 2</h2>
      <p className="text-slate-700">Contenu de la section</p>
    </section>
  </div>
</div>

Bouton personnalisé

<button className="rounded bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
  Cliquez ici
</button>

Carte responsive

<div className="max-w-sm overflow-hidden rounded-2xl shadow-lg">
  <img className="w-full" src="/image.jpg" alt="Image" />
  <div className="space-y-2 px-6 py-4">
    <div className="text-xl font-bold">Titre de la carte</div>
    <p className="text-slate-700">
      Description de la carte avec du texte sur plusieurs lignes.
    </p>
  </div>
</div>

🧪 Bonnes pratiques

Garder un ordre lisible des classes : layout → spacing → couleurs → état.

<div className="flex items-center gap-3 rounded bg-blue-600 p-4 text-white">
  Contenu
</div>

Extraire les motifs répétitifs dans des composants React.

function Button({ children }) {
  return (
    <button className="rounded bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
      {children}
    </button>
  );
}

Utiliser les variantes responsives pour adapter l'interface.

<div className="text-sm md:text-base lg:text-lg">Texte responsive</div>

Référence historique v3 : vous croiserez encore des tutoriels avec npx tailwindcss init, un fichier tailwind.config.js et les directives @tailwind base;, @tailwind components;, @tailwind utilities;. Ce flux reste utile pour lire d'anciens projets, mais pour un nouveau projet Tailwind v4, commencez par @import "tailwindcss"; puis ajoutez @theme si besoin.

Tooling

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord

🌬️ TailwindCSS

On this page