Tailwind CSS : classes utilitaires

Espacements

L’échelle d’espacement repose sur un pas de 0,25rem (4 px) : p-4 = 1rem.

Classe	Effet
`p-4`, `px-6`, `py-2`, `pt-1`	Marge intérieure (tous côtés, horizontal, vertical, haut)
`m-4`, `mx-auto`, `-mt-2`	Marge extérieure (`mx-auto` centre un bloc ; négative avec `-`)
`gap-4`, `gap-x-2`	Espace entre les enfants d’un flex ou d’une grille
`space-y-2`	Espace vertical entre les enfants

<div class="mx-auto max-w-3xl space-y-4 p-6">
  <p>Premier paragraphe</p>
  <p>Second paragraphe</p>
</div>

Dimensions

Classe	Effet
`w-64`, `w-1/2`, `w-full`, `w-screen`	Largeur
`h-10`, `h-full`, `min-h-screen`	Hauteur
`max-w-md`, `max-w-5xl`, `min-w-0`	Limites
`size-8`	Largeur et hauteur identiques
`aspect-video`, `aspect-square`	Rapport d’aspect

Typographie

<h1 class="text-3xl font-semibold tracking-tight text-slate-900">Titre</h1>
<p class="text-base leading-relaxed text-slate-600">Paragraphe lisible.</p>
<a class="underline underline-offset-4 hover:text-blue-600" href="/">Lien</a>
<span class="truncate">Texte tronqué avec des points de suspension…</span>

Classe	Effet
`text-sm`, `text-lg`, `text-2xl`	Taille de police
`font-light`, `font-medium`, `font-bold`	Graisse
`leading-tight`, `leading-relaxed`	Interligne
`tracking-wide`	Espacement des lettres
`text-left`, `text-center`	Alignement
`uppercase`, `capitalize`	Casse
`truncate`, `line-clamp-3`	Limiter à une ligne ou à trois
`font-sans`, `font-mono`	Famille de police

Couleurs

Palette couleur-niveau (50 à 950) :

<div class="border border-blue-700 bg-blue-600 text-white">…</div>
<p class="text-red-600/80">Texte rouge à 80 % d'opacité</p>
<div class="bg-black/50">Fond noir à 50 %</div>

Préfixe	Propriété
`text-`	Couleur du texte
`bg-`	Arrière-plan
`border-`	Bordure
`ring-`	Anneau (contour)
`fill-`, `stroke-`	SVG

La syntaxe /50 règle l’opacité de la couleur (voir la migration depuis la v3 dans Migration de la v3 à la v4).

Flexbox

<nav class="flex items-center justify-between gap-4">
  <a href="/">Logo</a>
  <ul class="flex gap-4">
    <li><a href="/a">A</a></li>
    <li><a href="/b">B</a></li>
  </ul>
</nav>

Classe	Effet
`flex`, `inline-flex`	Active flexbox
`flex-col`, `flex-row`, `flex-wrap`	Direction et retour à la ligne
`items-center`, `items-start`	Alignement transversal
`justify-between`, `justify-center`	Répartition sur l’axe principal
`flex-1`, `shrink-0`, `grow`	Croissance et réduction

Grille

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-lg border p-4">Carte 1</div>
  <div class="rounded-lg border p-4">Carte 2</div>
  <div class="rounded-lg border p-4">Carte 3</div>
</div>

grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] produit une grille qui s’adapte à la largeur disponible.

Bordures, ombres, arrondis

<div class="rounded-2xl border border-slate-200 bg-white shadow-sm">…</div>
<img class="size-12 rounded-full object-cover" src="/avatar.jpg" alt="" />
<hr class="my-6 border-slate-200" />
<input
  class="rounded-md border border-slate-300 px-3 py-2 focus:outline-2 focus:outline-blue-500"
/>

Classe	Effet
`rounded`, `rounded-lg`, `rounded-full`	Coins arrondis
`border`, `border-2`, `border-t`	Épaisseur et côté
`shadow-sm`, `shadow-md`, `shadow-lg`	Ombres
`ring-2 ring-blue-500`	Contour de focus
`divide-y`	Séparateurs entre enfants

Affichage et positionnement

Classe	Effet
`block`, `inline-block`, `hidden`	Affichage
`relative`, `absolute`, `fixed`, `sticky`	Positionnement
`top-0`, `inset-0`, `z-10`	Décalages et empilement
`overflow-hidden`, `overflow-auto`	Débordement
`sr-only`	Visible uniquement pour les lecteurs d’écran
`cursor-pointer`	Curseur main

<header class="sticky top-0 z-10 border-b bg-white/90 backdrop-blur">…</header>

Valeurs arbitraires

Entre crochets, pour une valeur hors échelle :

<div class="w-[320px] grid-cols-[1fr_2fr] bg-[#1e293b] pt-[calc(1rem+2px)]">
  …
</div>
<p class="text-(--ma-variable)">Utilise une variable CSS</p>

À réserver aux cas particuliers : si une valeur revient souvent, la déclarer dans le thème (voir Thème et personnalisation).

Transitions et animations

<button
  class="transition-colors duration-200 ease-out hover:bg-slate-100 motion-reduce:transition-none"
>
  Survol
</button>
<div
  class="size-5 animate-spin rounded-full border-2 border-t-transparent"
></div>

motion-reduce: respecte la préférence « réduire les animations » du système.

Dépannage

Symptôme	Piste
Une classe n’a aucun effet	Faute de frappe, ou classe qui n’existe plus en v4 : voir Migration de la v3 à la v4
`mx-auto` sans effet	Le bloc n’a pas de largeur (`max-w-` ou `w-`)
`truncate` ne tronque pas	Dans un conteneur flex, ajouter `min-w-0` à l’enfant
Classes en conflit (`p-2 p-4`)	La dernière définie dans le CSS l’emporte, pas l’ordre dans `class` : ne garder qu’une valeur
`space-y-*` imprécis avec un enfant masqué	Utiliser `flex flex-col gap-*`