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.

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).

La syntaxe : [Cible]-[Couleur]-[Intensité].

L'intensité va de 50 (très clair) à 950 (très foncé).

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.

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.

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.

Préfixez n'importe quelle classe avec un état ou une taille d'écran.