Tailwind CSS 备忘单
碧海醫心
发布时间：2024-12-24 20:12:19
|
491人浏览过
|
来源于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 |
红色边框颜色。 |
---
过渡与动画
(此处应补充过渡和动画相关的实用类名及描述)
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
下载
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
文心一言
文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。
讯飞写作
基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
即梦AI
一站式AI创作平台，免费AI图片和视频生成。
ChatGPT
最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
