Espacements, couleurs et typographie

Ce que tu vas apprendre

• Lire l'échelle d'espacement (p-4, mt-2, gap-6).
• Choisir des couleurs et des tailles de texte dans les valeurs fournies.
• Écrire une valeur sur mesure quand l'échelle ne suffit pas.

Les espacements

Voici une carte de recette avec du remplissage et de la marge :

<article class="p-4 mt-6">
  <h2 class="mb-2">Crêpes au citron</h2>
  <p>Prêtes en 15 minutes.</p>
</article>

Le remplissage (padding) est l'espace à l'intérieur d'un élément. La marge (margin) est l'espace à l'extérieur. Les classes se lisent en deux parties : une lettre pour le type, un nombre pour la taille.

mx-auto centre horizontalement un élément dont la largeur est limitée, par exemple avec max-w-md.

L'échelle des nombres

Le nombre n'est pas une valeur en pixels. Tailwind multiplie ce nombre par une unité de base, la variable --spacing, qui vaut 0.25rem par défaut.

Donc p-4 donne calc(var(--spacing) * 4), soit 1 rem (16 px dans un navigateur standard). p-2 donne 0,5 rem, p-8 donne 2 rem.

Cette échelle évite d'inventer des valeurs au hasard : tes espaces restent des multiples les uns des autres, et la page paraît plus régulière.

Les couleurs

Les couleurs se composent d'un nom et d'une nuance de 50 (très clair) à 950 (très foncé) :

<div class="bg-orange-50 text-orange-900 border border-orange-300">
  Astuce : sale l'eau des pâtes.
</div>

• bg- pour le fond (background).
• text- pour la couleur du texte.
• border- pour la bordure (la classe border seule règle l'épaisseur).

Pour une couleur semi-transparente, ajoute une barre oblique et un pourcentage : bg-orange-500/50.

La typographie

<h1 class="text-3xl font-bold tracking-tight">Mes recettes</h1>
<p class="text-base leading-7 text-gray-700">
  Des plats simples pour la semaine.
</p>

Chaque classe de taille règle aussi l'interligne. Par exemple text-sm vaut 0,875 rem (14 px), text-base vaut 1 rem et text-xl vaut 1,25 rem (20 px).

Pour choisir toi-même l'interligne, utilise une barre oblique : text-sm/6 règle la taille et l'interligne en une seule classe.

Coins, ombres et bordures

Trois classes rendent vite une carte plus agréable :

<div class="rounded-lg border shadow-md p-4">...</div>

• rounded-lg arrondit les coins.
• border ajoute une bordure fine.
• shadow-md ajoute une ombre moyenne.

Une valeur sur mesure

Quand l'échelle ne contient pas la valeur voulue, mets-la entre crochets :

<div class="p-[5px] w-[22rem] bg-[#f5e6d3]">...</div>

C'est une valeur arbitraire. Pour p-[5px], Tailwind produit padding: 5px;.

Un exemple complet

<article class="mx-auto max-w-md rounded-lg border bg-white p-6 shadow-md">
  <h2 class="mb-2 text-xl font-bold text-orange-700">Crêpes au citron</h2>
  <p class="text-sm leading-6 text-gray-600">
    Mélange la farine, les œufs et le lait, puis laisse reposer la pâte.
  </p>
</article>

Lis-le de gauche à droite : la carte est centrée et limitée en largeur, arrondie, avec une bordure, un fond blanc, du remplissage et une ombre. Le titre est en orange foncé, gras. Le texte est petit et gris.

À retenir

• p-, m- et gap- règlent les espaces ; x, y, t, r, b, l précisent le côté.
• Le nombre multiplie --spacing (0,25 rem par défaut) : p-4 vaut 1 rem.
• Les couleurs combinent un nom et une nuance de 50 à 950 : bg-orange-50, text-gray-600.
• text-, font-, leading- et tracking- règlent la taille, la graisse, l'interligne et l'écart des lettres.
• Les crochets (p-[5px]) donnent une valeur arbitraire, à utiliser avec parcimonie.