Tailwind CSS 是一个实用优先的 CSS 框架，通过预定义的原子类名快速构建界面，其类名遵循命名规则+属性值的核心逻辑。以下是 Tailwind 核心类名体系的完整梳理，涵盖布局、样式、响应式等所有核心维度，并说明类名写法和含义：
一、核心命名规则
Tailwind 类名的通用格式：
[前缀]:[属性值] // 基础格式（如 p-4、bg-red-500）
[响应式前缀]:[前缀]:[属性值] // 响应式（如 md:p-6）
[状态前缀]:[前缀]:[属性值] // 状态（如 hover:bg-red-600）
[变体前缀]/[值]:[前缀]:[属性值] // 变体（如 dark:bg-gray-800、rtl:float-right）二、基础布局类
1. 尺寸（Width/Height）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| w-[值] | 宽度 | w-full（100%）、w-1/2（50%）、w-20（5rem）、w-auto、w-screen（视口宽度）、w-fit（自适应内容） |
| h-[值] | 高度 | h-full、h-32（8rem）、h-screen、h-auto、h-fit |
| min-w-[值] | 最小宽度 | min-w-0、min-w-full、min-w-[200px] |
| min-h-[值] | 最小高度 | min-h-screen、min-h-[300px] |
| max-w-[值] | 最大宽度（预设容器） | max-w-sm（640px）、max-w-xl（1280px）、max-w-none |
| max-h-[值] | 最大高度 | max-h-full、max-h-[500px] |
2. 边距（Margin/Padding）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| p-[值] | 四周边距 | p-4（1rem）、p-0、p-[10px] |
| px-[值] | 水平边距（左右） | px-6、px-auto |
| py-[值] | 垂直边距（上下） | py-8、py-[15px] |
| pt/pr/pb/pl-[值] | 上/右/下/左边距 | pt-2、pl-[8px] |
| m-[值] | 四边外边距 | m-4、m-0、m-auto（水平居中） |
| mx-[值] | 水平外边距 | mx-auto、mx-6 |
| my-[值] | 垂直外边距 | my-8、my-[10px] |
| mt/mr/mb/ml-[值] | 上/右/下/左外边距 | mt-3、mb-[-5px]（负边距） |
3. 定位（Position）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| static/relative/absolute/fixed/sticky | 定位类型 | relative、absolute |
| top/right/bottom/left-[值] | 定位偏移 | top-0、right-4、left-1/2、bottom-[-10px] |
| z-[值] | z-index | z-10、z-50、z-auto、z-[999] |
4. 显示与溢出（Display/Overflow）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| block/inline/inline-block/flex/inline-flex/grid/inline-grid | 显示类型 | flex、block、hidden |
| overflow-[值] | 溢出处理 | overflow-hidden、overflow-auto、overflow-scroll、overflow-x-hidden |
| truncate | 单行文本截断（省略号） | truncate |
| text-ellipsis | 省略号（需配合overflow） | text-ellipsis |
| whitespace-[值] | 空白处理 | whitespace-nowrap（不换行） |
三、弹性布局 & 网格布局
1. Flex 布局
| 类名写法 | 含义 | 示例 |
|---|---|---|
| flex-direction-[值] | 排列方向 | flex-row（默认）、flex-col、flex-row-reverse |
| flex-wrap-[值] | 换行 | flex-wrap、flex-nowrap |
| justify-content-[值] | 主轴对齐 | justify-center、justify-between、justify-around、justify-start |
| items-[值] | 交叉轴对齐 | items-center、items-start、items-end、items-baseline |
| content-[值] | 多行主轴对齐 | content-center、content-between |
| flex-[值] | 伸缩比例 | flex-1、flex-auto、flex-none |
| order-[值] | 排列顺序 | order-0、order-1、order-[-1] |
| gap-[值] | 子元素间距 | gap-4、gap-x-2、gap-y-6 |
2. Grid 布局
| 类名写法 | 含义 | 示例 |
|---|---|---|
| grid-cols-[值] | 列数 | grid-cols-3（3列）、grid-cols-1/2（自定义）、grid-cols-[1fr,2fr] |
| grid-rows-[值] | 行数 | grid-rows-2、grid-rows-[auto,1fr] |
| col-span-[值] | 列跨度 | col-span-2、col-span-full（占满） |
| row-span-[值] | 行跨度 | row-span-3、row-span-full |
| justify-items-[值] | 单元格水平对齐 | justify-items-center、justify-items-start |
| align-items-[值] | 单元格垂直对齐 | align-items-center |
| place-items-[值] | 单元格居中（合并） | place-items-center |
| grid-flow-[值] | 自动排列方向 | grid-flow-row、grid-flow-col |
四、视觉样式
1. 背景
| 类名写法 | 含义 | 示例 |
|---|---|---|
| bg-[颜色值] | 背景色 | bg-red-500、bg-gray-100、bg-[#f0f0f0]、bg-transparent |
| bg-opacity-[值] | 背景透明度 | bg-opacity-50（50%）、bg-opacity-[75%] |
| bg-gradient-[方向] | 渐变背景 | bg-gradient-to-r（从左到右）、bg-gradient-to-br（左下到右上） |
| bg-[url] | 背景图片 | bg-[url('/img.jpg')] |
| bg-repeat-[值] | 背景重复 | bg-repeat、bg-no-repeat、bg-repeat-x |
| bg-position-[值] | 背景位置 | bg-center、bg-top-right、bg-[20px_30px] |
| bg-size-[值] | 背景尺寸 | bg-cover、bg-contain、bg-[100px_200px] |
2. 文本样式
| 类名写法 | 含义 | 示例 |
|---|---|---|
| text-[颜色值] | 文本颜色 | text-blue-600、text-[#333]、text-white |
| text-opacity-[值] | 文本透明度 | text-opacity-80 |
| text-[大小] | 字体大小 | text-sm（0.875rem）、text-xl（1.25rem）、text-3xl、text-[20px] |
| font-[权重/样式] | 字体样式 | font-bold（700）、font-medium（500）、font-normal、font-italic、font-sans（无衬线） |
| leading-[值] | 行高 | leading-normal、leading-loose、leading-[1.8] |
| tracking-[值] | 字间距 | tracking-tight、tracking-wide、tracking-[2px] |
| text-[对齐] | 文本对齐 | text-left、text-center、text-right、text-justify |
| text-[转换] | 文本转换 | text-uppercase（大写）、text-lowercase、text-capitalize（首字母大写） |
3. 边框
| 类名写法 | 含义 | 示例 |
|---|---|---|
| border-[值] | 边框宽度 | border（1px）、border-2、border-0、border-t（仅上边框） |
| border-[颜色] | 边框颜色 | border-gray-300、border-[#ddd]、border-transparent |
| border-opacity-[值] | 边框透明度 | border-opacity-50 |
| rounded-[值] | 圆角 | rounded（默认）、rounded-lg、rounded-full（圆形）、rounded-tl-[10px]（左上圆角） |
| outline-[值] | 外轮廓 | outline-none、outline-2、outline-blue-500 |
4. 阴影
| 类名写法 | 含义 | 示例 |
|---|---|---|
| shadow-[值] | 阴影 | shadow-sm、shadow、shadow-lg、shadow-xl、shadow-none |
| shadow-[颜色] | 阴影颜色 | shadow-red-500/50（半透明）、shadow-[#000]/20 |
| ring-[值] | 聚焦环（替代outline） | ring-2、ring-blue-500、ring-offset-2（环偏移） |
5. 交互样式
| 类名写法 | 含义 | 示例 |
|---|---|---|
| cursor-[值] | 鼠标指针 | cursor-pointer、cursor-default、cursor-not-allowed |
| pointer-events-[值] | 指针事件 | pointer-events-none（禁用点击）、pointer-events-auto |
| select-[值] | 文本选择 | select-none（禁止选择）、select-text |
| opacity-[值] | 整体透明度 | opacity-50、opacity-100、opacity-0 |
五、响应式与状态变体
1. 响应式前缀（基于断点）
| 前缀 | 断点宽度 | 含义 | 示例 |
|---|---|---|---|
| sm: | ≥640px | 小屏幕 | sm:flex |
| md: | ≥768px | 中等屏幕 | md:w-1/2 |
| lg: | ≥1024px | 大屏幕 | lg:px-8 |
| xl: | ≥1280px | 超大屏幕 | xl:grid-cols-4 |
| 2xl: | ≥1536px | 特大屏幕 | 2xl:text-4xl |
2. 状态前缀
| 前缀 | 含义 | 示例 |
|---|---|---|
| hover: | 鼠标悬停 | hover:bg-blue-600 |
| focus: | 焦点（键盘/点击） | focus:ring-2 |
| active: | 激活状态 | active:bg-blue-700 |
| focus-visible: | 可视焦点 | focus-visible:outline-none |
| disabled: | 禁用状态 | disabled:opacity-50 |
| checked: | 选中状态（单选/复选） | checked:bg-green-500 |
| visited: | 链接已访问 | visited:text-purple-600 |
| group-hover: | 父元素hover | group-hover:text-white |
3. 特殊变体
| 前缀 | 含义 | 示例 |
|---|---|---|
| dark: | 暗黑模式 | dark:bg-gray-800 |
| rtl: | 从右到左布局 | rtl:float-right |
| motion-safe: | 开启动画时生效 | motion-safe:animate-fade |
| print: | 打印样式 | print:hidden |
六、动画与过渡
1. 过渡（Transition）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| transition | 启用过渡 | transition |
| transition-[属性] | 过渡属性 | transition-colors、transition-all、transition-[opacity,transform] |
| duration-[值] | 过渡时长 | duration-300、duration-[500ms] |
| ease-[值] | 过渡曲线 | ease-in、ease-out、ease-in-out |
2. 动画（Animation）
| 类名写法 | 含义 | 示例 |
|---|---|---|
| animate-[动画名] | 启用动画 | animate-spin（旋转）、animate-pulse（脉冲）、animate-bounce（弹跳） |
| @keyframes 自定义 | 自定义动画 | animate-[my-animation]（需自定义keyframe） |
七、自定义类名
Tailwind 支持通过 [] 编写任意值的类名，覆盖预设值：
- 数值自定义：
w-[200px]、h-[50vh]、m-[1.5rem] - 颜色自定义：
bg-[#123456]、text-[rgb(255,0,0)] - 复合属性：
grid-cols-[1fr,2fr,1fr]、shadow-[0_4px_6px_rgba(0,0,0,0.1)]
八、核心速记规则
- 缩写原则：常用属性缩写（p=padding、m=margin、w=width、h=height、bg=background、text=color 等）；
- 数值映射 ：预设数值（如 4=1rem、8=2rem）基于
rem单位，适配响应式； - 颜色体系：颜色名+权重（如 red-500 是标准红，red-600 更深），支持透明通道（如 red-500/50）；
- 重置类 ：
reset相关（如 border-0、m-0、p-0）用于清除默认样式。
补充说明
- 完整类名列表可参考 Tailwind 官方文档（含最新特性）；
- 可通过
tailwind.config.js自定义预设值（如颜色、尺寸、断点）； - 生产环境需开启 PurgeCSS 或 JIT 模式，移除未使用的类名，减小体积。
以上覆盖了 Tailwind CSS 99% 的核心类名体系，遵循"原子化、语义化、可扩展"的原则，掌握后可快速构建任意界面样式。
ps：AI生成，供学习参考