概述
Tailwind CSS 是一个实用类优先（utility-first）的 CSS 框架，用于快速构建自定义用户界面。它不鼓励编写自定义 CSS，而是在标记中直接组合实用类来构建设计。
本技能基于 Tailwind CSS v4.1.18，生成于 2026-01-28。Tailwind v4 引入了 CSS 优先的配置方式，配合主题变量（theme variables），使定制设计系统更加容易。
核心参考
| 主题 | 说明 | 参考 |
|---|---|---|
| 安装 | Vite、PostCSS、CLI 和 CDN 设置 | core-installation |
| 实用类 | 理解 Tailwind 的实用类优先方法及元素样式化 | core-utility-classes |
| 主题变量 | 设计令牌、自定义主题及主题变量命名空间 | core-theme |
| 响应式设计 | 移动优先断点、响应式变体及容器查询 | core-responsive |
| 变体 | 使用状态、伪类和媒体查询变体有条件地应用实用类 | core-variants |
| Preflight | Tailwind 的基础样式以及如何扩展或禁用它们 | core-preflight |
布局
显示与 Flexbox 与 Grid
| 主题 | 说明 | 参考 |
|---|---|---|
| 显示 | flex、grid、block、inline、hidden、sr-only、flow-root、contents | layout-display |
| Flexbox | flex-direction、justify、items、gap、grow、shrink、wrap、order | layout-flexbox |
| Grid | grid-cols、grid-rows、gap、place-items、col-span、row-span、subgrid | layout-grid |
| 宽高比 | 为响应式媒体控制元素宽高比 | layout-aspect-ratio |
| 多列 | 用于杂志式或瀑布流布局的多列布局 | layout-columns |
定位
| 主题 | 说明 | 参考 |
|---|---|---|
| 定位 | 使用 static、relative、absolute、fixed 和 sticky 控制元素定位 | layout-position |
| 内边距定位 | 使用 top、right、bottom、left 和 inset 实用类控制已定位元素的位置 | layout-inset |
尺寸
| 主题 | 说明 | 参考 |
|---|---|---|
| 宽度 | 使用间距刻度、分数、容器尺寸和视口单位设置元素宽度 | layout-width |
| 高度 | 使用间距刻度、分数、视口单位和基于内容的尺寸设置元素高度 | layout-height |
| 最小与最大尺寸 | min-width、max-width、min-height、max-height 约束 | layout-min-max-sizing |
间距
| 主题 | 说明 | 参考 |
|---|---|---|
| 外边距 | 使用间距刻度、负值、逻辑属性和 space 实用类控制元素外边距 | layout-margin |
| 内边距 | 使用间距刻度、逻辑属性和方向性实用类控制元素内边距 | layout-padding |
溢出
| 主题 | 说明 | 参考 |
|---|---|---|
| 溢出 | 控制元素如何处理超出其容器的内容 | layout-overflow |
图像与替换元素
| 主题 | 说明 | 参考 |
|---|---|---|
| 对象适配与定位 | 控制图像和视频的缩放与定位方式 | layout-object-fit-position |
表格
| 主题 | 说明 | 参考 |
|---|---|---|
| 表格布局 | border-collapse、table-auto、table-fixed | layout-tables |
变换
| 主题 | 说明 | 参考 |
|---|---|---|
| 变换基础 | 用于启用变换、硬件加速和自定义变换值的基础变换实用类 | transform-base |
| 平移 | 使用间距刻度、百分比和自定义值在 x、y、z 轴上平移元素 | transform-translate |
| 旋转 | 使用角度值和自定义旋转在 2D 和 3D 空间中旋转元素 | transform-rotate |
| 缩放 | 使用百分比值对元素进行均匀或特定轴上的缩放 | transform-scale |
| 倾斜 | 使用角度值在 x 和 y 轴上倾斜元素 | transform-skew |
排版
| 主题 | 说明 | 参考 |
|---|---|---|
| 字体与文本 | 字号、字重、颜色、行高、字间距、装饰、截断 | typography-font-text |
| 文本对齐 | 使用 left、center、right、justify 和逻辑属性控制文本对齐 | typography-text-align |
| 列表样式 | 用于项目符号和标记的 list-style-type、list-style-position | typography-list-style |
视觉
| 主题 | 说明 | 参考 |
|---|---|---|
| 背景 | 背景颜色、渐变、图像、尺寸、位置 | visual-background |
| 边框 | 边框宽度、颜色、圆角、divide、ring | visual-border |
| 效果 | 盒阴影、不透明度、mix-blend、backdrop-blur、filter | visual-effects |
| SVG | 用于 SVG 和图标样式的 fill、stroke、stroke-width | visual-svg |
效果与交互
| 主题 | 说明 | 参考 |
|---|---|---|
| 过渡与动画 | CSS 过渡、动画关键帧、减少动态效果 | effects-transition-animation |
| 可见性与交互 | 可见性、光标、pointer-events、user-select、z-index | effects-visibility-interactivity |
| 表单控件 | accent-color、appearance、caret-color、resize | effects-form-controls |
| 滚动吸附 | 用于轮播的 scroll-snap-type、scroll-snap-align | effects-scroll-snap |
功能
深色模式
| 主题 | 说明 | 参考 |
|---|---|---|
| 深色模式 | 使用 dark 变体和自定义策略实现深色模式 | features-dark-mode |
迁移
| 主题 | 说明 | 参考 |
|---|---|---|
| 升级指南 | 从 v3 迁移到 v4、破坏性变更、重命名映射 | features-upgrade |
自定义
| 主题 | 说明 | 参考 |
|---|---|---|
| 自定义样式 | 添加自定义样式、实用类、变体，以及使用任意值 | features-custom-styles |
| 函数与指令 | 用于操作设计系统的 Tailwind CSS 指令和函数 | features-functions-directives |
| 内容检测 | Tailwind 如何检测类，以及如何自定义内容扫描 | features-content-detection |
最佳实践
| 主题 | 说明 | 参考 |
|---|---|---|
| 实用类模式 | 管理重复、冲突、important 修饰符，以及何时使用组件 | best-practices-utility-patterns |
关键建议
- 在标记中直接使用实用类——通过组合实用类来构建设计
- 使用主题变量进行自定义——使用 @theme 指令定义设计令牌
- 移动优先的响应式设计——未加前缀的实用类用于移动端，加前缀的用于断点
- 使用完整的类名——永远不要用字符串插值动态构造类
- 善用变体——叠加变体以实现复杂的条件样式
- 优先使用 CSS 优先配置——使用 @theme、@utility 和 @custom-variant 而非 JavaScript 配置