Tailwind CSS 备忘单

wufei123 2025-01-05 阅读:6 评论:0

页面布局实用类名描述 container 居中内容。 block / inline-block 块级或内联块级元素。 flex / grid Flexbox 或 Grid 布局。 flex-col / fle...

tailwind css 备忘单

页面布局实用类名描述 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 备忘单的详细内容，更多请关注知识资源分享宝库其它相关文章！