Tailwind CSS Cheatsheet

Layout

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.

---

Spacing

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

---

Typography

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.

---

Background

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

---

Borders

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

---

Shadows

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

---

Sizing

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

---

Flexbox Alignment

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

---

Positioning

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

---

Colors

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

---

Transitions & Animation

The above is the detailed content of Tailwind CSS Cheatsheet. For more information, please follow other related articles on the PHP Chinese website!