字
字节笔记本
2026年2月23日
Tailwind CSS Cheat Sheet - 在线速查工具
Tailwind CSS Cheat Sheet 是一个便捷的在线速查工具，帮助开发者快速查找 Tailwind CSS 的所有实用类名。该网站按功能分类整理了完整的类名参考，支持搜索、版本切换和深色模式。
功能特点
- 完整类名索引：涵盖 Tailwind CSS 所有版本的所有实用类名
- 智能搜索：快速定位所需的 CSS 类
- 版本切换：支持从 v0.7.x 到 v2.2.x 的多个版本
- 深色模式：支持亮色/暗色主题切换
- 分类清晰：按功能模块组织，便于查找
分类目录
Layout（布局）
- Breakpoints - 响应式断点
- Container - 容器
- Display - 显示属性
- Position - 定位
- Z-Index - 层级
- Overflow - 溢出处理
- Object Fit/Position - 对象适配与位置
Spacing（间距）
- Padding - 内边距
- Margin - 外边距
- Space Between - 子元素间距
Sizing（尺寸）
- Width/Height - 宽高
- Min/Max Width - 最小/最大宽度
- Min/Max Height - 最小/最大高度
Typography（排版）
- Font Family - 字体
- Font Size - 字号
- Font Weight - 字重
- Line Height - 行高
- Letter Spacing - 字间距
- Text Color/Align/Decoration - 文本颜色/对齐/装饰
- List Style - 列表样式
Backgrounds（背景）
- Background Color - 背景色
- Background Image - 背景图
- Background Size/Position - 背景尺寸/位置
- Gradient Color - 渐变色
Borders（边框）
- Border Radius - 圆角
- Border Width - 边框宽度
- Border Color - 边框颜色
- Border Style - 边框样式
- Ring - 焦点环样式
Flexbox
- Flex Direction - 主轴方向
- Flex Wrap - 换行
- Flex/Grow/Shrink - 弹性伸缩
- Justify Content/Items/Self - 主轴对齐
- Align Items/Content/Self - 交叉轴对齐
Grid
- Grid Template - 网格模板
- Grid Column/Row - 网格行列
- Gap - 间距
- Grid Auto - 自动网格
Effects（效果）
- Box Shadow - 阴影
- Opacity - 透明度
- Mix Blend Mode - 混合模式
Transforms（变换）
- Scale - 缩放
- Rotate - 旋转
- Translate - 位移
- Skew - 倾斜
Transitions（过渡）
- Transition Property - 过渡属性
- Duration - 持续时间
- Timing Function - 时间函数
- Delay - 延迟
- Animation - 动画
Filters（滤镜）
- Blur - 模糊
- Brightness - 亮度
- Contrast - 对比度
- Grayscale - 灰度
- Sepia - 复古色
- Hue Rotate - 色相旋转
使用方法
- 访问网站：https://nerdcave.com/tailwind-cheat-sheet
- 使用搜索框快速查找类名
- 点击任意类名查看详细文档
- 切换版本查看不同版本的类名差异
适用场景
- 快速查找 Tailwind CSS 类名
- 学习 Tailwind CSS 完整 API
- 对比不同版本的类名变化
- 离线参考（可收藏网页）
相关资源
这是一个非常实用的开发者工具，建议收藏备用。
分享: