Aide-mémoire CSS Tailwind

Mise en page

Utility Class	Description
container	Centers the content.
block / inline-block	Block-level or inline-block.
flex / grid	Flexbox or Grid layout.
flex-col / flex-row	Flex direction column/row.
items-center	Align items vertically.
justify-center	Align items horizontally.
gap-1 - gap-12	Spacing between items.

---

Espacement

Utility Class	Description
m-{size}	Margin: mt, mb, ml, mr.
p-{size}	Padding: pt, pb, pl, pr.
{size} options	0, px, 1 - 96, etc.

---

Typographie

Utility Class	Description
text-{size}	Font size (e.g., text-sm).
font-bold	Bold text.
font-medium	Medium text.
font-light	Light text.
text-left / text-center / text-right	Text alignment.
text-gray-500	Text color.

---

Contexte

Utility Class	Description
bg-{color}	Background color.
bg-gradient-to-r	Gradient from left to right.
bg-opacity-{value}	Background transparency.

---

Frontières

Utility Class	Description
border	Default border width.
border-{color}	Border color.
rounded / rounded-{size}	Rounded corners.

---

Ombres

Utility Class	Description
shadow-sm	Small shadow.
shadow-md	Medium shadow.
shadow-lg	Large shadow.
shadow-none	No shadow.

---

Taille

Utility Class	Description
w-{size} / h-{size}	Width/Height (full, auto, percentages).
max-w-{size}	Maximum width.
min-h-{size}	Minimum height.

---

Alignement Flexbox

Utility Class	Description
justify-start	Align items at the start.
justify-between	Space between items.
items-start	Align items top.

---

Positionnement

Utility Class	Description
absolute / relative	Positioning modes.
top-{value} / left-{value}	Offset values.
z-{value}	Z-index (stacking).

---

Couleurs

Class Examples	Description
text-blue-500	Blue text color.
bg-green-300	Green background color.
border-red-400	Red border color.

---

Transitions & Animations

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!