版面
| 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. |
彈性盒對齊
| 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中文網其他相關文章！
