Tailwind CSS 速查
Tailwind CSS 常用类速查：共 34 条，涵盖布局、间距尺寸、排版、颜色与背景、边框与效果、状态与响应式六组常用类名， 支持搜索与分类筛选，点击即可复制。全部为静态数据，浏览器本地展示。
布局
弹性、网格与定位。
| 类名 | 说明 |
|---|---|
| 开启弹性布局 | |
| 三列网格布局 | |
| 垂直居中、水平两端对齐 | |
| 绝对定位并铺满父容器 | |
| 相对定位并抬高层级 | |
| 小屏隐藏、中屏及以上显示 |
间距与尺寸
p 为内边距、m 为外边距，数值单位为 0.25rem。
| 类名 | 说明 |
|---|---|
| 四周内边距 1rem | |
| 左右 / 上下内边距 | |
| 上 / 下外边距 | |
| 网格或弹性子项之间的间距 | |
| 子元素之间的纵向间距 | |
| 满宽、满屏高 |
排版
字号、字重与文本处理。
| 类名 | 说明 |
|---|---|
| 字号与文字颜色 | |
| 加粗与大字号 | |
| 行高 | |
| 字间距 | |
| 居中、超长省略 | |
| 等宽字体 |
颜色与背景
文字色、背景色与渐变。
| 类名 | 说明 |
|---|---|
| 设置文字颜色 | |
| 设置背景色 | |
| 设置边框颜色 | |
| 左右方向渐变背景 | |
| 设置透明度 |
边框与效果
圆角、阴影与分隔。
| 类名 | 说明 |
|---|---|
| 设置圆角 | |
| 加边框与浅阴影 | |
| 焦点外环 | |
| 子元素之间加分隔线 | |
| 去掉默认轮廓 |
状态与响应式
交互态与断点前缀。
| 类名 | 说明 |
|---|---|
| 悬停时改变背景 | |
| 聚焦时显示外环 | |
| 按下时轻微缩放 | |
| 禁用时变半透明 | |
| 响应式断点前缀 | |
| 深色模式样式 |
使用说明
Tailwind CSS 的类名组合很多，写页面时常常想不起某个间距或颜色对应的类。这份速查表按布局、间距、排版、颜色、响应式等分组列出常用工具类，边写边查更快。
- 搜索需求关键词，如「flex」「padding」「断点」「圆角」。
- 切换分类标签查看同类工具类。
- 点击复制类名到页面模板中组合使用。
常见问题
- 响应式前缀怎么用？
- 在类名前加断点前缀，如 md:flex、lg:grid-cols-3，表示在对应断点及以上生效，默认移动优先。