Tailwind CSS 备忘单
夏杰同学_1680
发布时间：2024-12-24 20:12:19
|
511人浏览过
|
来源于php中文网
原创
页面布局
| 实用类名 |
描述 |
| 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 |
红色边框颜色。 |
---
过渡与动画
(此处应补充过渡和动画相关的实用类名及描述)
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。
一款AI音频处理工具，主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区，适合需要提升相关任务效率的用户。
Atoms是一款AI智能体工具，第一支自动构建真实业务的 AI 团队。
一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。
SkildArt是一款AI文本写作工具，一站式 AI 视觉创作平台。
DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。
一款AI办公效率工具，主要用于基于AI技术的免费在线简历制作工具，适合需要提升相关任务效率的用户。
一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。
一款AI视频创作工具，主要用于商汤科技推出的创编一体的AI短视频创作Agent，适合需要提升相关任务效率的用户。
