# Cheat Sheet de Tailwind

Tailwind utilise des classes utilitaires. La logique est souvent `[Propriété]-[Taille/Couleur/Valeur]`.

## 1. Espacement (Margin & Padding)
La syntaxe : `[Type][Direction]-[Taille]`.
- **Type** : `m` (Margin / Extérieur) ou `p` (Padding / Intérieur).
- **Direction** : `t` (Haut), `b` (Bas), `l` (Gauche), `r` (Droite), `x` (Horizontal), `y` (Vertical), ou rien (Partout).
- **Taille** : Échelle basée sur des multiples de 4px (ex: `1` = 4px, `2` = 8px, `4` = 16px).

| Classe | Équivalent CSS | Explication |
| :--- | :--- | :--- |
| `p-4` | `padding: 16px;` | Espace à l'intérieur partout. |
| `px-6` | `padding-left: 24px; padding-right: 24px;` | Espace à l'intérieur, à gauche et à droite. |
| `mt-2` | `margin-top: 8px;` | Espace à l'extérieur, vers le haut. |
| `mx-auto` | `margin: 0 auto;` | Centre un bloc horizontalement. |

## 2. Dimensions (Width & Height)
La syntaxe : `w-[Taille]` (Largeur) et `h-[Taille]` (Hauteur).

| Classe | Équivalent CSS | Explication |
| :--- | :--- | :--- |
| `w-full` | `width: 100%;` | Prend toute la largeur disponible. |
| `w-1/2` | `width: 50%;` | Prend la moitié de la largeur. |
| `w-screen` | `width: 100vw;` | Prend la largeur totale de l'écran. |
| `h-screen` | `height: 100vh;` | Prend la hauteur totale de l'écran. |
| `w-16` | `width: 64px;` | Échelle numérique classique (16 * 4px). |

## 3. Couleurs
La syntaxe : `[Cible]-[Couleur]-[Intensité]`.
L'intensité va de `50` (très clair) à `950` (très foncé).

| Cible | Exemple Tailwind | Ce que ça colore |
| :--- | :--- | :--- |
| **Texte** | `text-blue-500`, `text-white` | La couleur de la police. |
| **Fond** | `bg-red-600`, `bg-gray-900` | La couleur d'arrière-plan. |
| **Bordure** | `border-green-400` | La couleur de la bordure. |

## 4. Typographie
Gérez la taille, la graisse et l'alignement.

| Catégorie | Classes utiles | Explication |
| :--- | :--- | :--- |
| **Taille** | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl` | Du plus petit au plus grand. |
| **Graisse** | `font-light`, `font-normal`, `font-semibold`, `font-bold` | L'épaisseur des lettres. |
| **Alignement**| `text-left`, `text-center`, `text-right` | L'alignement du texte. |

## 5. Flexbox (Mise en page)
Déclarez `flex` pour commencer à aligner vos éléments.

| Classe | Équivalent CSS | Explication |
| :--- | :--- | :--- |
| `flex` | `display: flex;` | Aligne les enfants en ligne (côte à côte). |
| `flex-col` | `flex-direction: column;` | Aligne les enfants en colonne. |
| `justify-center` | `justify-content: center;` | Centre sur l'axe principal. |
| `justify-between`| `justify-content: space-between;`| Écarte les éléments aux extrémités. |
| `items-center` | `align-items: center;` | Centre sur l'axe secondaire (souvent verticalement). |
| `gap-4` | `gap: 16px;` | Ajoute 16px d'espace entre chaque enfant. |

## 6. Bordures et Arrondis (Border & Rounded)
Il faut toujours spécifier une épaisseur pour voir la bordure.

| Classe | Équivalent CSS | Explication |
| :--- | :--- | :--- |
| `border` | `border-width: 1px;` | Ajoute une bordure de 1px partout. |
| `border-t` | `border-top-width: 1px;` | Bordure uniquement en haut. |
| `rounded` | `border-radius: 4px;` | Arrondit légèrement les angles. |
| `rounded-md` | `border-radius: 6px;` | Arrondi moyen (idéal pour boutons). |
| `rounded-full` | `border-radius: 9999px;` | Fait un cercle parfait ou une pilule. |

## 7. États et Responsif (Préfixes)
Préfixez n'importe quelle classe avec un état ou une taille d'écran.

- **Survol (Hover) :** `hover:bg-blue-600`
- **Focus :** `focus:border-blue-500`
- **Responsif (Mobile First) :** - `w-full` (100% sur mobile par défaut)
  - `md:w-1/2` (50% sur tablette)
  - `lg:w-1/3` (33% sur grand écran)