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生成，供学习参考