登录
首页 >  文章 >  前端

Tailwind CSS 备忘单

时间：2025-01-22 17:15:40 281浏览 收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《Tailwind CSS 备忘单》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！


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 备忘单》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>