nouvelle note: tailwind (21/02)

docs/learn/2026-02-21.md

@@ -0,0 +1,78 @@
+# 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)