Tailwind CSS 치트시트

레이아웃

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.

---

간격

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

---

타이포그래피

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.

---

배경

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

---

테두리

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

---

그림자

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

---

사이징

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

---

Flexbox 정렬

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

---

포지셔닝

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

---

색상

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

---

전환 및 애니메이션

위 내용은 Tailwind CSS 치트시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!