页面布局
| 实用类名 |
描述 |
| container |
居中内容。 |
| block / inline-block |
块级或内联块级元素。 |
| flex / grid |
Flexbox 或 Grid 布局。 |
| flex-col / flex-row |
Flex 布局方向：列/行。 |
| items-center |
垂直居中对齐项目。 |
| justify-center |
水平居中对齐项目。 |
| gap-1 - gap-12 |
项目间距。 |
---
间距与填充
| 实用类名 |
描述 |
| m-{size} |
外边距：mt, mb, ml, mr。 |
| p-{size} |
内边距：pt, pb, pl, pr。 |
| {size} 值 |
0, px, 1 - 96 等。 |
---
文本样式
| 实用类名 |
描述 |
| text-{size} |
字体大小 (例如：text-sm)。 |
| font-bold |
粗体文本。 |
| font-medium |
中等粗细文本。 |
| font-light |
细体文本。 |
| text-left / text-center / text-right |
文本对齐方式。 |
| text-gray-500 |
文本颜色。 |
---
背景样式
| 实用类名 |
描述 |
| bg-{color} |
背景颜色。 |
| bg-gradient-to-r |
从左到右的渐变背景。 |
| bg-opacity-{value} |
背景透明度。 |
---
边框样式
| 实用类名 |
描述 |
| border |
默认边框宽度。 |
| border-{color} |
边框颜色。 |
| rounded / rounded-{size} |
圆角。 |
---
阴影效果
| 实用类名 |
描述 |
| shadow-sm |
小阴影。 |
| shadow-md |
中等阴影。 |
| shadow-lg |
大阴影。 |
| shadow-none |
无阴影。 |
---
尺寸设置
| 实用类名 |
描述 |
| w-{size} / h-{size} |
宽度/高度 (full, auto, 百分比)。 |
| max-w-{size} |
最大宽度。 |
| min-h-{size} |
最小高度。 |
---
Flexbox 对齐方式
| 实用类名 |
描述 |
| justify-start |
项目起始位置对齐。 |
| justify-between |
项目间距平均分配。 |
| items-start |
项目顶部对齐。 |
---
元素定位
| 实用类名 |
描述 |
| absolute / relative |
定位模式。 |
| top-{value} / left-{value} |
偏移值。 |
| z-{value} |
Z-index (层叠顺序)。 |
---
颜色选择
| 类名示例 |
描述 |
| text-blue-500 |
蓝色文本颜色。 |
| bg-green-300 |
绿色背景颜色。 |
| border-red-400 |
红色边框颜色。 |
---
过渡与动画
(此处应补充过渡和动画相关的实用类名及描述)
以上就是Tailwind CSS 备忘单的详细内容，更多请关注php中文网其它相关文章！
广告
796
收藏
