mirror of
https://github.com/buchtioof/notes.git
synced 2026-05-02 17:43:28 +02:00
82 lines
3.7 KiB
Markdown
82 lines
3.7 KiB
Markdown
# Cheat Sheet 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) |
