Tailwind CSS 45 termes

Directive qui injecte des utilitaires Tailwind dans une classe CSS. En v4, dans un fichier séparé (CSS module, <style> Vue/Svelte), il faut d'abord @référence la feuille principale pour accéder au thème, sans dupliquer le CSS émis.

Créer un raccourci clavier qui exécute plusieurs commandes d'un coup.

/* Component.vue <style> ou styles.module.css */
@reference "../../app.css";

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg
    hover:bg-blue-700 transition-colors;
}

Cas d'usage : Extraire un composant réutilisable quand les classes sont trop longues dans le HTML.

Organisation du CSS en couches natives (@layer base, components, utilities). En v4 les @tailwind base/components/utilities disparaissent au profit d'un seul @import ; @layer base et components restent valides, mais un utilitaire personnalisé se déclare avec @utility pour supporter les variantes.

Les étages d'un immeuble : base au sous-sol, composants au milieu, utilitaires au sommet (la plus haute priorité).

@import "tailwindcss";

@layer base {
  h1 { font-size: var(--text-2xl); }
}
@layer components {
  .card { padding: --spacing(4); box-shadow: var(--shadow-md); }
}
/* v3 : @layer utilities { .tab-4 {...} }  →  v4 : */
@utility tab-4 { tab-size: 4; }

Cas d'usage : Organiser ses styles custom pour qu'ils s'intègrent correctement dans le système de spécificité Tailwind.

Depuis Tailwind v4.0, la détection des classes est automatique et respecte .gitignore. @source ajoute un chemin ignoré (bibliothèque dans node_modules), @source not exclut un dossier, @import "tailwindcss" source(none) désactive l'automatique, et @source inline() remplace la safelist avec expansion d'accolades.

Dire au facteur quelles rues desservir en plus de sa tournée habituelle, et lesquelles éviter.

@import "tailwindcss";

@source "../node_modules/@acme/ui-lib";
@source not "../src/legacy";

/* safelist : bg-red-50 … bg-red-950 avec hover: */
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

Cas d'usage : Monorepos et bibliothèques de composants partagées, classes construites dynamiquement côté serveur.

Plugin officiel qui ajoute la classe prose pour styler du contenu riche (articles, markdown, CMS). En v4 il se charge avec la directive @plugin dans le CSS, plus via plugins: [] du fichier JS.

Un styliste personnel pour tes articles : il rend tout beau sans que tu touches a chaque élément.

<!-- app.css : @import "tailwindcss"; @plugin "@tailwindcss/typography"; -->
<article class="prose prose-lg dark:prose-invert max-w-none">
  <h1>Mon article</h1>
  <p>Le contenu est stylé automatiquement…</p>
</article>

Cas d'usage : Styler du contenu éditorial/markdown venant d'un CMS ou d'une base de données.

Directive de Tailwind v4.0 (22 janvier 2025) qui remplace theme de tailwind.config.js. Chaque variable déclarée dans un espace de noms (--color-*, --font-*, --breakpoint-*, --spacing-*, --text-*…) génère les utilitaires et variantes correspondants, et reste disponible comme variable CSS native. --color-*: initial réinitialise un espace de noms ; @theme inline sert quand on référence d'autres variables.

Un tableau de bord où déplacer un curseur change toutes les pièces reliées d'un coup.

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178); /* bg-mint-500, text-mint-500… */
  --font-display: "Satoshi", sans-serif;  /* font-display */
  --breakpoint-3xl: 120rem;               /* 3xl:… */
}

@theme inline {
  --font-sans: var(--font-inter); /* référence une variable externe */
}

.custom { color: var(--color-mint-500); } /* utilisable en CSS pur */

Cas d'usage : Décrire la charte (couleurs, polices, points de rupture) dans la feuille principale et la partager avec le CSS maison.

Directive de Tailwind v4 qui déclare un utilitaire maison compatible avec toutes les variantes (hover:, lg:, dark:). La forme fonctionnelle nom-* accepte des valeurs via --value() (thème, entier nu, littéral, arbitraire) et un modificateur via --modifier(), avec --default() comme repli (v4.3). Elle remplace @layer utilities et addUtilities().

Ajouter sa propre pièce au jeu de construction, taillée pour s'emboîter avec les autres.

@utility content-auto {
  content-visibility: auto;
}

/* tab-2, tab-4, tab-[7] */
@utility tab-* {
  tab-size: --value(--tab-size-*, integer, [integer]);
}

/* text-fluid-3/1.2 : valeur + modificateur */
@utility text-fluid-* {
  font-size: --value(integer, --default(2));
  line-height: --modifier(number, --default(1.2));
}

Cas d'usage : Étendre Tailwind avec des propriétés absentes (content-visibility, text-shadow…) ou des échelles métier, sans plugin JavaScript.

Deux directives v4. @variant applique une variante Tailwind (dark, hover, md…) à l'intérieur d'une règle CSS maison ; v4.3 (8 mai 2026) accepte les variantes empilées (hover:focus) et composées (hover, focus). @custom-variant crée une nouvelle variante à partir d'un sélecteur, par exemple pour piloter le mode sombre par classe.

Un tampon « uniquement le week-end » qu'on appose sur n'importe quelle règle.

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant hocus (&:hover, &:focus);

.button {
  background: var(--color-sky-500);
  @variant hover:focus { background: var(--color-sky-600); } /* empilée */
  @variant dark { background: var(--color-sky-300); }
}

Cas d'usage : Écrire du CSS de composant qui réutilise les variantes du projet, et définir des variantes métier (theme-midnight, hocus).

Classes animate-* pour les animations prédéfinies (spin, ping, pulsé, bounce) et transition-* pour les transitions CSS avec durée et easing configurables.

animate c'est une chorégraphie complète, transition c'est juste un fondu entre deux poses.

<div class="animate-spin h-8 w-8 border-4
  border-blue-500 rounded-full border-t-transparent">
</div>
<button class="transition-all duration-300 ease-in-out
  hover:scale-105 hover:shadow-lg">Bouton</button>

Cas d'usage : Ajouter du mouvement subtil aux interactions utilisateur (loading spinners, hover effects).

Syntaxe entre crochets pour une valeur absente du thème. En v4, une variable CSS s'écrit entre parenthèses (bg-(--brand)) et non plus bg-[--brand] ; le modificateur important passe en fin de classe (flex!).

Un joker dans un jeu de cartes : tu l'utilises quand aucune carte standard ne convient.

<div class="top-[117px] w-[calc(100%-2rem)]
  bg-[#1da1f2] grid-cols-[1fr_2fr]
  bg-(--brand-color) flex!">
</div>
<!-- v3 : bg-[--brand-color] !flex -->

Cas d'usage : Respecter une maquette pixel-perfect avec des valeurs spécifiques sans polluer la config Tailwind.

Technique consistant a combiner plusieurs classes utilitaires pour créer un style complet. L'ordre des classes n'affecte pas la spécificité.

Comme composer un plat en ajoutant des ingrédients un par un : sel, poivre, huile, chacun apporte sa touche.

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

Cas d'usage : Construire des composants UI en empilant des utilitaires sans écrire de CSS custom.

Utilitaires pour construire des chaînés de classes conditionnelles. cn() combine clsx + twMerge pour gérer les conditions ET les conflits Tailwind.

Un assistant qui compose ta tenue selon la météo : si pluie alors parapluie, si froid alors manteau.

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

const cn = (...inputs) => twMerge(clsx(inputs))

cn('p-4 bg-blue-500', isActive && 'bg-green-500',
  { 'opacity-50': isDisabled })
// => 'p-4 bg-green-500' si isActive

Cas d'usage : Gérer proprement les classes conditionnelles dans les composants React avec Tailwind.

Stratégie de factorisation des styles répétitifs en composants (React, Vue) ou en classes @apply. Le composant JS/TS est préféré a @apply.

Quand tu répètes la même recette, tu l'écris sur une fiche plutôt que de la réciter a chaque fois.

// Prefere: composant React
const Button = ({ children }) => (
  <button className="px-4 py-2 bg-blue-500
    text-white rounded hover:bg-blue-600">
    {children}
  </button>
);

Cas d'usage : Éviter la duplication de longues chaînés de classes dans les templates/JSX.

Classe qui fixe la largeur max d'un élément selon le breakpoint actif. Peut être centre automatiquement via la config.

Les bords d'une route : ils empêchent le contenu de s'étaler a l'infini sur grands écrans.

<div class="container mx-auto px-4">
  <!-- Contenu centre et contraint -->
</div>
// config: container: { center: true, padding: '1rem' }

Cas d'usage : Centrer le contenu principal et limiter sa largeur sur grands écrans.

Variantes basées sur la taille du conteneur parent, pas du viewport. Natives depuis Tailwind v4.0 (22 janvier 2025), sans le plugin @tailwindcss/container-queries : @container sur le parent, puis @sm:, @md:, @max-md:, conteneurs nommés (@container/main) et tailles arbitraires (@min-[475px]).

Un meuble qui s'adapte a la taille de la pièce ou il se trouve, pas a la taille de la maison.

<div class="@container/main">
  <div class="flex flex-col @md/main:flex-row @max-sm:hidden">
    <!-- s'adapte à la largeur du parent -->
  </div>
</div>

Cas d'usage : Créer des composants vraiment responsifs qui s'adaptent a leur conteneur, pas au viewport.

Chemins que Tailwind scanne pour trouver les classes. En v3 ils se déclarent dans content de tailwind.config.js. En v4.0 la détection est automatique ; @source enregistre explicitement une bibliothèque tierce, @source not exclut un dossier, et source(none) désactive l'automatique.

Dire au facteur quelles boites aux lettres existent pour qu'il ne distribue pas de courrier fantôme.

@import "tailwindcss" source(none);
@source "../src";
@source "../node_modules/flowbite";
@source not "../src/components/legacy";

Cas d'usage : Configurer correctement le scanning pour éviter que des classes soient manquantes en production.

Extension de Tailwind avec ses propres utilitaires et variantes. En v3 via plugin() et addUtilities/addVariant en JavaScript ; en v4 via @utility (y compris fonctionnel avec --value()) et @custom-variant, directement en CSS, sans code.

Fabriquer tes propres briques LEGO quand les formes standard ne suffisent plus.

/* variante hocus:bg-blue-500 */
@custom-variant hocus (&:hover, &:focus);

/* utilitaire fonctionnel tab-2, tab-4, tab-[7] */
@utility tab-* {
  tab-size: --value(integer, [integer]);
}

Cas d'usage : Ajouter des variantes custom (hocus, supports) ou des utilitaires métier au framework.

Plugin Tailwind qui ajoute des classes de composants sémantiques (btn, card, modal). Fournit des themes pre-faits tout en restant personnalisable.

Un kit de meubles IKEA pre-assembles : prêts a l'emploi mais tu peux les customiser.

<button class="btn btn-primary">Cliquer</button>
<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Titre</h2>
  </div>
</div>

Cas d'usage : Prototyper rapidement avec des composants pre-styles tout en gardant l'écosystème Tailwind.

Préfixe dark: qui applique des styles quand le mode sombre est actif. Par défaut il suit prefers-color-scheme. Pour un basculement manuel, la v4 redéfinit la variante avec @custom-variant dark, sur une classe ou un attribut data-theme.

Un interrupteur jour/nuit dans ta maison : les meubles restent, seul l'éclairage change.

@import "tailwindcss";
/* basculement par classe .dark */
@custom-variant dark (&:where(.dark, .dark *));

/* ou par attribut */
/* @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); */

/* HTML : <html class="dark"> ... <div class="bg-white dark:bg-black"> */

Cas d'usage : Implémenter un theme sombre sans dupliquer les composants ni gérer des variables CSS manuellement.

Ensemble de classes utilitaires pour contrôler les layouts flexbox : direction, alignement, justification, wrap et grow/shrink.

Un chef d'orchestre qui place les musiciens en ligne, les espace et les aligne comme il veut.

<div class="flex flex-col md:flex-row
  items-center justify-between gap-4
  flex-wrap">
  <div class="flex-1">A</div>
  <div class="flex-shrink-0">B</div>
</div>

Cas d'usage : Créer des layouts flexibles et responsifs (navbars, cards, formulaires) sans CSS custom.

Librairie de composants Tailwind avec du JavaScript interactif inclus. Disponible en version vanilla, React, Vue et Svelte.

Un catalogue de meubles avec la notice de montage et les outils fournis.

<div data-dial-init class="fixed end-6 bottom-6">
  <button data-dial-toggle="speed-dial"
    class="btn btn-primary rounded-full p-4">
    +
  </button>
</div>

Cas d'usage : Ajouter des composants interactifs (dropdowns, modals, carousels) dans un projet Tailwind.

Classes pour contrôler la police (font-sans/serif/mono), le poids (font-bold), la taille (text-sm/lg/xl) et le style (italic, antialiased).

Les réglages d'un traitement de texte : police, taille, gras, italique.

<h1 class="font-display text-4xl font-extrabold
  tracking-tight leading-tight">
  Titre Principal
</h1>
<p class="font-sans text-base font-normal
  text-gray-600 leading-relaxed">Contenu</p>

Cas d'usage : Appliquer une typographie cohérente sur l'ensemble du projet via des classes utilitaires.

Classes pour créer des grilles CSS : nombre de colonnes, placement, gaps et zones. Simplifie les layouts complexes en quelques classes.

Un tableur Excel : tu définis colonnes et lignes, puis places tes contenus dans les cellules.

<div class="grid grid-cols-3 gap-6">
  <div class="col-span-2">Large</div>
  <div class="row-span-2">Haut</div>
  <div>Normal</div>
</div>

Cas d'usage : Construire des grilles de cards, galleries photo, ou dashboards avec un layout précis.

Modificateurs qui permettent de styler un enfant (group-hover:) ou un élément frère (peer-checked:) en fonction de l'état d'un autre élément.

Quand papa sourit (group), les enfants changent de couleur. Quand ton voisin coche (peer), tu apparais.

<div class="group p-4 hover:bg-blue-50">
  <h3 class="group-hover:text-blue-600">Titre</h3>
</div>

<input type="checkbox" class="peer" />
<p class="hidden peer-checked:block">Visible si coche</p>

Cas d'usage : Créer des interactions parent-enfant ou frère-frère sans JavaScript.

Librairie de composants accessibles et sans style par défaut, conçue par l'équipe Tailwind. Fournit la logique (modals, menus, tabs) sans imposer de design.

Un mannequin nu : il a la structure, tu choisis les vêtements (les styles).

import { Menu } from '@headlessui/react'
<Menu>
  <Menu.Button className="px-4 py-2">Options</Menu.Button>
  <Menu.Items className="absolute mt-2 bg-white shadow-lg">
    <Menu.Item>{({ active }) =>
      <a className={active ? 'bg-blue-100' : ''}>Edit</a>
    }</Menu.Item>
  </Menu.Items>
</Menu>

Cas d'usage : Implémenter des composants accessibles (ARIA) avec un style 100% custom en Tailwind.

Génération des classes à la volée, uniquement pour celles trouvées dans les sources. Activée par défaut depuis Tailwind 3, elle est portée en v4.0 (22 janvier 2025) par le moteur Oxide, réécrit en Rust : builds complets 3,78× plus rapides, rebuilds incrémentaux jusqu'à 182× plus rapides selon l'annonce.

Un restaurant a la carte au lieu d'un buffet : on prépare uniquement ce que tu commandes.

<!-- Seules les classes rencontrées sont générées -->
<div class="top-[117px] grid-cols-[1fr_auto] grid-cols-15">
</div>
<!-- v4 : valeurs dynamiques sans config (grid-cols-15) -->

Cas d'usage : Avoir un build rapide et un fichier CSS minimal même avec des milliers de variantes possibles.

Animations personnalisées utilisables via animate-*. En v4 elles se déclarent dans @theme : une variable --animate-<nom> crée l'utilitaire, et les @keyframes vivent dans le même bloc.

Écrire le script d'une scène de film, puis dire a l'acteur de la jouer avec animate-*.

@import "tailwindcss";

@theme {
  --animate-fade-in: fade-in 0.5s ease-in-out;

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
/* HTML : <div class="animate-fade-in"> */

Cas d'usage : Créer des animations d'entrée/sortie custom pour les modals, toasts, et notifications.

Points de rupture documentés dans le guide officiel : @tailwind base/components/utilities remplacés par @import "tailwindcss" ; config JS chargée explicitement via @config ; utilitaires renommés (shadow-sm → shadow-xs, shadow → shadow-sm, ring → ring-3, outline-none → outline-hidden) ; bordure par défaut currentColor ; préfixe en tw:flex ; important en flex! ; variables en bg-(--var) ; theme() déprécié au profit de var(--color-…). L'outil npx @tailwindcss/upgrade automatise l'essentiel. Contexte : Tailwind Labs a rejoint Shopify le 9 septembre 2026.

Déménager : mêmes meubles, nouvelle adresse et quelques cartons à réétiqueter.

/* v3 */
@tailwind base; @tailwind components; @tailwind utilities;
.card { box-shadow: theme(boxShadow.md); }

/* v4 */
@import "tailwindcss";
.card { box-shadow: var(--shadow-md); }

/* HTML : shadow → shadow-sm, !flex → flex!, tw-flex → tw:flex,
   bg-[--brand] → bg-(--brand), focus:ring → focus:ring-3 */

Cas d'usage : Préparer la montée de version d'un projet v3 : lancer l'upgrade tool sur une branche, relire les classes renommées, vérifier les bordures.

Moteur de Tailwind v4.0 (22 janvier 2025) réécrit en Rust avec Lightning CSS : d'après l'annonce, builds complets 3,78× plus rapides et rebuilds incrémentaux sans nouveau CSS 182× plus rapides. Il gère lui-même @import, les préfixes vendeur et l'imbrication native, ce qui rend Sass/Less/PostCSS-nesting inutiles. Il cible Safari 16.4, Chrome 111 et Firefox 128 minimum, car il repose sur @property et color-mix().

Remplacer le moteur d'une voiture par un bloc moderne : même carrosserie, démarrage instantané.

# CLI v4 (paquet renommé)
npx @tailwindcss/cli -i src/app.css -o dist/app.css --watch

# Vite : @tailwindcss/vite ; webpack : @tailwindcss/webpack (v4.2)
# PostCSS : @tailwindcss/postcss

# Migration automatique v3 → v4 (Node 20+)
npx @tailwindcss/upgrade

Cas d'usage : Comprendre pourquoi v4 abandonne le préprocesseur et quels navigateurs anciens (Safari < 16.4) excluent le passage à v4.

Classes p-* et m-* pour contrôler le padding et la marge. Variantes directionnelles (px, py, pt, pr, pb, pl) et valeurs négatives (-m-*).

Le padding c'est le rembourrage dans un colis, la marge c'est l'espace entre les colis sur l'étagère.

<div class="p-6 m-4">
  <div class="px-4 py-2 mt-2 -ml-1">
    Padding horizontal 1rem, vertical 0.5rem
  </div>
</div>

Cas d'usage : Contrôler l'espacement interne et externe de chaque élément dans le layout.

Système d'extension de Tailwind. En v4, l'essentiel se fait en CSS : @utility pour un utilitaire, @custom-variant pour une variante, @theme pour les tokens. Les plugins JavaScript (typography, forms) se chargent en mode compatibilité avec @plugin.

Des extensions de navigateur : elles ajoutent des fonctionnalités sans modifier le coeur du logiciel.

@import "tailwindcss";

/* plugin JS hérité */
@plugin "@tailwindcss/typography";

/* équivalent CSS-first d'un mini-plugin */
@utility text-shadow {
  text-shadow: 2px 2px 4px rgb(0 0 0 / 0.1);
}

Cas d'usage : Ajouter des utilitaires manquantes ou intégrer un système de design custom dans Tailwind.

Préfixe ajouté à toutes les classes Tailwind pour éviter les collisions avec du CSS existant. En v4 le préfixe se déclare à l'import et s'écrit comme une variante : tw:flex, tw:hover:bg-red-600 (et non plus tw-flex).

Mettre une étiquette sur tes affaires a l'école pour ne pas les confondre avec celles des autres.

@import "tailwindcss" prefix(tw);

/* HTML v4 : <div class="tw:flex tw:p-4 tw:hover:bg-blue-600"> */
/* HTML v3 : <div class="tw-flex tw-p-4"> */

Cas d'usage : Intégrer Tailwind dans un projet existant avec du CSS legacy sans conflits de noms.

Mécanisme qui n'émet que les classes réellement utilisées. Renommé de purge à content dans Tailwind 3, il devient automatique en v4.0 : Tailwind scanne le projet seul, ignore .gitignore, node_modules et les binaires. La directive @source ajoute des chemins hors détection.

Le tri dans un dressing : tu gardes ce que tu portes, tu jettes le reste.

/* Tailwind 2 : purge: [...]  |  Tailwind 3 : content: [...] */
/* Tailwind 4 : détection automatique + @source */
@import "tailwindcss";
@source "../node_modules/@acme/ui-lib";
@source not "../src/legacy";

Cas d'usage : Réduire le CSS final de plusieurs Mo a quelques Ko en production.

Stratégie mobile-first ou les styles de base ciblent le mobile, et les préfixes de breakpoint ajoutent des styles pour les écrans plus larges.

Construire un bâtiment du rez-de-chaussée vers le haut : chaque étage ajoute de l'espace.

<!-- Mobile: stack, Tablet: 2 cols, Desktop: 3 cols -->
<div class="flex flex-col sm:flex-row sm:flex-wrap">
  <div class="w-full sm:w-1/2 lg:w-1/3 p-2">
    Card
  </div>
</div>

Cas d'usage : Adapter automatiquement le layout a toutes les tailles d'écran sans média queries manuelles.

Préfixes (sm, md, lg, xl, 2xl) qui appliquent une classe uniquement a partir d'un breakpoint donne. L'approche est mobile-first par défaut.

Des vêtements adaptatifs : un manteau que tu enfiles seulement quand il fait froid (a partir d'une certaine température).

<div class="grid grid-cols-1 sm:grid-cols-2
  md:grid-cols-3 lg:grid-cols-4">
  <!-- Responsive grid -->
</div>

Cas d'usage : Créer des layouts responsifs sans média queries manuelles, directement dans le markup.

Classes forcées dans le build même si elles n'apparaissent pas dans les sources. L'option safelist de tailwind.config.js n'existe plus en v4 ; on utilise @source inline(), qui accepte l'expansion d'accolades pour générer des plages.

Une liste VIP : ces invites entrent toujours, peu importe s'ils sont sur la liste principale.

@import "tailwindcss";

/* génère bg-red-50, bg-red-100 … bg-red-950 + hover: */
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

/* exclure des classes */
@source not inline("container");

Cas d'usage : Garantir que des classes construites dynamiquement (bg-${color}-500) sont presentes en production.

Collection de composants React copies dans le projet (pas un npm package). Base sur Radix UI + Tailwind, entièrement personnalisable car le code est dans ton repo.

Un livre de recettes ou tu photographies chaque recette : tu peux modifier les ingrédients a volonté.

// npx shadcn-ui@latest add button
import { Button } from '@/components/ui/button'

<Button variant="destructive" size="lg">
  Supprimer
</Button>

Cas d'usage : Bootstrapper une UI React avec des composants accessibles et personnalisables sans dépendance npm lourde.

Utilitaires space-x et space-y qui ajoutent un espacement entre les enfants d'un conteneur via des marges automatiques. Alternative a gap pour les anciens navigateurs.

Des separateurs automatiques entre les livres sur une étagère.

<div class="space-y-4">
  <p>Premier</p>
  <p>Deuxieme (margin-top: 1rem auto)</p>
  <p>Troisieme</p>
</div>

Cas d'usage : Espacer uniformément les enfants d'une liste verticale ou horizontale.

Préfixes conditionnels (hover:, focus:, active:, disabled:, etc.) qui appliquent un style uniquement dans un état spécifique de l'élément.

Comme un caméléon qui change de couleur selon la situation : touche, survole, presse.

<button class="bg-blue-500 hover:bg-blue-700
  focus:ring-2 focus:ring-blue-300
  active:scale-95 disabled:opacity-50">
  Action
</button>

Cas d'usage : Gérer les interactions utilisateur (survol, focus, clic) sans écrire de pseudo-selectors CSS.

Librairie qui fusionne intelligemment les classes Tailwind en résolvant les conflits. p-4 + p-2 donne p-2 au lieu de garder les deux.

Un arbitre qui tranche quand deux règles se contredisent : la dernière gagne proprement.

import { twMerge } from 'tailwind-merge'

twMerge('px-4 py-2 bg-blue-500', 'px-6 bg-red-500')
// => 'py-2 px-6 bg-red-500'

Cas d'usage : Permettre l'override propre de styles dans des composants qui acceptent className en prop.

Plugin communautaire ajoutant des classes d'animation avancées a Tailwind (motion-safe, motion-reduce, et des presets d'animation plus riches).

Un pack d'effets spéciaux pour tes films : fondu, zoom, rotation, tout prêt a l'emploi.

<div class="motion-safe:animate-fadeIn
  motion-reduce:animate-none">
  Respecte les preferences d'accessibilite
</div>

Cas d'usage : Ajouter des animations respectant prefers-reduced-motion sans code CSS custom.

Point de configuration de Tailwind. Depuis la v4.0 (22 janvier 2025), il se fait en CSS : un seul @import "tailwindcss" puis un bloc @theme pour les tokens. Le fichier tailwind.config.js n'est plus détecté automatiquement ; il se charge en mode compatibilité via @config.

Le tableau de bord de ta voiture : tu règles tout depuis un seul endroit.

/* app.css — Tailwind v4 */
@import "tailwindcss";

@theme {
  --color-brand: #ff6b35;
  --font-display: "Satoshi", sans-serif;
  --breakpoint-3xl: 120rem;
}

/* Compatibilité : ancien fichier JS */
/* @config "../../tailwind.config.js"; */

Cas d'usage : Personnaliser couleurs, polices et points de rupture pour coller à la charte, directement dans la feuille CSS principale.

Classes pour contrôler l'alignement (text-center), la couleur (text-gray-600), la décoration (underline), le truncate et le line-clamp du texte.

Les outils de mise en forme dans un éditeur : aligner, colorer, souligner, couper.

<p class="text-center text-gray-600 uppercase
  tracking-wide truncate">
  Texte tronque si trop long...
</p>
<p class="line-clamp-3">Limite a 3 lignes...</p>

Cas d'usage : Formater le texte (alignement, couleur, coupure) directement dans le markup.

Ajout de valeurs au thème sans écraser les valeurs par défaut. En v3 : theme.extend dans le JS. En v4 : déclarer une variable dans @theme ajoute la valeur ; pour remplacer tout un espace de noms on écrit --color-*: initial avant ses propres couleurs.

Ajouter des pages a un dictionnaire sans arracher les existantes.

@import "tailwindcss";

@theme {
  /* ajoute sans écraser */
  --spacing-128: 32rem;
  --color-primary-500: #6366f1;
  --font-display: "Inter", sans-serif;
}

/* remplacer toute la palette : */
/* @theme { --color-*: initial; --color-white: #fff; } */

Cas d'usage : Ajouter des couleurs de marque, des tailles custom tout en conservant les utilitaires existants.

Approche ou le style est applique via des classes utilitaires atomiques directement dans le HTML. Chaque classe fait une seule chose (couleur, marge, taille).

Des briques LEGO : chaque pièce a une fonction unique, et tu construis ce que tu veux en les combinant.

<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-gray-900">Titre</h2>
</div>

Cas d'usage : Prototyper rapidement des interfaces sans quitter le HTML ni gérer de fichiers CSS séparés.

Classes w-* et h-* pour définir la largeur et hauteur. Inclut les valeurs fractionnelles (w-1/2), min/max (min-w-0, max-h-screen) et spéciales (w-full, h-screen, h-dvh).

Comme régler la taille d'une fenêtre : largeur, hauteur, et des limites min/max.

<div class="w-full max-w-lg mx-auto h-screen">
  <img class="w-1/2 h-auto" />
  <div class="min-h-[50vh] size-16"></div>
</div>

Cas d'usage : Dimensionner des éléments de façon responsive avec des contraintes min/max.