Tailwind CSS 速查表 - Tailwind CSS 类名大全
原子化 CSS 的门槛不在记住类名，而在理解它的约束条件：类名写在标记里，所以变体（断点、暗色、状态）只能以前缀形式出现，也没法在运行时拼字符串。这张表按布局、Flexbox、Grid、间距与尺寸、排版、颜色与背景、响应式与交互、边框与特效分组，把最容易记混的几组对照摆出来——gap 与 space-x、flex-1 与 grow。判断依据是能不能把它塞进已有组件而不新增样式表：如果一个需求的实现要写出自定义 CSS，通常是 Tailwind 的表达没找对，而不是非它不可。什么时候翻它：搭响应式栅格、接入 design token 做暗色主题、用 group-hover 与 peer-* 处理父子状态联动、或者做 hover 动画与裁剪。与语义化 class 混写时约定要提前定死，否则组件目录里会同时存在两套命名规则。
典型使用场景
面向用 Tailwind 做界面开发、需要在明暗双主题下保持一致性的前端工程师。本表把原子类按「布局→Flexbox→Grid→间距尺寸→排版→颜色背景→响应式交互→边框特效」八条线排开，重点钉住四个高频判断：一维用 Flex、二维用 Grid；间距优先用 gap 而不是给每个子元素写 margin；颜色分 50-900 十档，数字越大越深，深色模式用 dark: 前缀成对改写；断点是移动优先，sm: 表示 ≥640px 往大屏扩展。做卡片列表、导航栏、表单这类常规界面时，按本表从容器到排版逐层拼类即可；遇到「样式不生效」「深色模式对比度不够」「子元素为什么没间距」，直接对照易错点排查。
布局 Layout 7
containerblock / inline-block / inlinehiddenrelative / absolute / fixed / stickyoverflow-auto / overflow-hiddenvisible / invisiblez-10 / z-50 / z-[-1]Flexbox 7
flexflex-row / flex-colflex-wrap / flex-nowrapjustify-start / justify-center / justify-between / justify-enditems-start / items-center / items-endflex-1 / flex-auto / flex-nonegap-4 / gap-x-4 / gap-y-4Grid 7
gridgrid-cols-3 / grid-cols-12grid-rows-3col-span-2 / col-span-fullrow-span-2 / row-span-fullplace-items-center / place-content-centergap-4间距与尺寸 8
p-4 / px-4 / py-2 / pt-4m-4 / mx-auto / my-2 / mt-4space-x-4 / space-y-4w-64 / w-1/2 / w-full / w-screenh-64 / h-1/2 / h-full / h-screenmax-w-lg / max-w-7xl / max-w-screen-xlmin-h-screen / min-h-0size-8 / size-16排版 Typography 9
text-xs / text-sm / text-base / text-lg / text-xl / text-2xl ... text-9xlfont-thin / font-normal / font-medium / font-bold / font-blackleading-none / leading-tight / leading-relaxed / leading-loosetracking-tight / tracking-wide / tracking-widertext-left / text-center / text-right / text-justifyunderline / line-through / no-underlineuppercase / lowercase / capitalizetruncatewhitespace-nowrap / break-words颜色与背景 7
text-red-500 / text-blue-600 / text-gray-900bg-white / bg-gray-100 / bg-blue-500border-gray-300 / border-red-500ring-2 ring-blue-500shadow-sm / shadow-md / shadow-lg / shadow-xlopacity-50 / opacity-100bg-gradient-to-r from-blue-500 to-purple-500响应式与交互 9
sm: / md: / lg: / xl: / 2xl:hover:bg-blue-500focus:outline-none focus:ring-2active:scale-95dark:bg-gray-800 dark:text-whitetransition / transition-all / transition-colorshover:scale-110 / hover:rotate-6animate-spin / animate-ping / animate-pulse / animate-bouncecursor-pointer / cursor-not-allowed边框与特效 7
border / border-2 / border-4 / border-b-2border-solid / border-dashed / border-dotted / border-nonerounded-sm / rounded / rounded-lg / rounded-xl / rounded-fullring / ring-2 ring-insetshadow / shadow-md / shadow-lg / shadow-xl / shadow-2xloutline / outline-2 outline-offset-2blur-sm / blur-lg / brightness-50 / contrast-125 / grayscale参数矩阵
| 参数 | 作用 | 示例 |
|---|---|---|
container | 响应式容器，自动居中并设 max-width | <div class="container"> |
flex / grid | 启用弹性布局 / 网格布局 | <div class="flex"> |
flex-row / flex-col | 主轴方向：行 / 列 | class="flex flex-col" |
justify-between / justify-center | 主轴对齐方式 | class="flex justify-between" |
items-center | 交叉轴居中对齐 | class="flex items-center" |
flex-1 / flex-none | 弹性伸缩 / 不伸缩 | class="flex-1" |
flex-wrap | 空间不足时换行 | class="flex flex-wrap" |
gap-4 / gap-x-4 / gap-y-4 | 子元素间距（全部 / 水平 / 垂直） | class="flex gap-4" |
grid-cols-3 / grid-cols-12 | 定义 3 列 / 12 列网格 | class="grid grid-cols-3" |
col-span-2 / col-span-full | 跨越 2 列 / 占满整行 | class="col-span-full" |
place-items-center | 网格整体对齐（行列同时居中） | class="grid place-items-center" |
p-4 / px-4 / pt-4 | 内边距：四边 / 水平 / 上 | class="px-4 pt-2" |
mx-auto | 外边距水平自动，块级元素水平居中 | class="mx-auto" |
space-x-4 / space-y-4 | 仅给直接子元素加相邻间距 | class="space-y-4" |
w-full / w-64 / w-1/2 | 宽度：撑满 / 固定 16rem / 一半 | class="w-full" |
h-64 / h-full / min-h-screen | 固定高 / 撑满父级 / 至少一屏 | class="min-h-screen" |
max-w-lg / max-w-7xl | 限制最大宽度 | class="max-w-7xl" |
size-8 | 同时设置宽高（Tailwind 3.4+） | class="size-8" |
text-xs ... text-2xl | 字号阶梯 xs/sm/base/lg/xl/2xl | class="text-lg" |
font-normal / font-medium / font-bold | 字重 | class="font-bold" |
leading-tight / leading-relaxed | 行高：紧凑 / 宽松 | class="leading-relaxed" |
tracking-tight / tracking-wider | 字间距 | class="tracking-wider" |
truncate | 单行溢出显示省略号 | class="truncate" |
whitespace-nowrap / break-words | 禁止换行 / 长词断行 | class="whitespace-nowrap" |
uppercase / capitalize | 文本大小写转换 | class="uppercase" |
text-gray-900 / bg-gray-100 | 文本色 / 背景色（50-900 层级） | class="text-gray-900" |
ring-2 ring-blue-500 | 聚焦环宽度与颜色 | class="focus:ring-2 ring-blue-500" |
shadow-sm / shadow-lg | 阴影层级 | class="shadow-lg" |
opacity-50 | 整体透明度 | class="opacity-50" |
bg-gradient-to-r from-blue-500 to-purple-500 | 横向渐变背景 | class="bg-gradient-to-r from-blue-500 to-purple-500" |
sm: / md: / lg: / xl: / 2xl: | 响应式断点前缀（移动优先） | class="grid-cols-1 md:grid-cols-3" |
hover:bg-blue-500 | 鼠标悬停态样式 | class="hover:bg-blue-500" |
focus:outline-none focus:ring-2 | 聚焦态样式，常用于表单可访问性 | class="focus:outline-none" |
active:scale-95 | 点击激活态缩放反馈 | class="active:scale-95" |
dark:bg-gray-800 dark:text-white | 暗色模式专用样式 | class="dark:bg-gray-800" |
transition / transition-colors | 过渡动画（全属性 / 仅颜色） | class="transition-colors" |
hover:scale-110 / hover:rotate-6 | 悬停变换动画 | class="hover:scale-110" |
animate-spin / animate-ping / animate-pulse / animate-bounce | 内置循环动画 | class="animate-spin" |
rounded / rounded-lg / rounded-full | 圆角：小 / 大 / 全圆 | class="rounded-full" |
border / border-2 / border-b-2 | 边框宽度 | class="border-2" |
border-dashed / border-dotted | 虚线 / 点线边框 | class="border-dashed" |
blur-sm / grayscale / contrast-125 | 滤镜特效 | class="grayscale" |
易错点与避坑指南
现象flex 容器的子元素之间完全没有间距，但明明写了 margin 类
原因给父容器写了 margin 只影响父级与外部的关系，不影响子元素之间的间隔；子元素间距要用 gap 或 space-*。
处置在 flex 容器上写 gap-4（或 space-x-4 / space-y-4），不要逐个子元素加 margin。
现象加了 md: 或 lg: 前缀的样式在浏览器里没生效，窗口已明显变宽
原因断点是移动优先的 min-width 语义：未加前缀的样式是大屏之外的默认值，加了前缀的样式只在该宽度及以上才覆盖；且类名必须拼写完整。
处置确认前缀拼写正确（md:grid-cols-3 而非 md:grid-cols-three），并把基础单列写法放在类列表前、宽屏写法放在后面。
现象暗色模式下文字和背景几乎同色，整页看不清
原因只改了背景色（如 dark:bg-gray-800）却没同时改文字色，深底上默认的深色文字就消失了。
处置背景色与文字色成对设置，例如 class="bg-white text-gray-900 dark:bg-gray-800 dark:text-white"。
现象长文本撑破卡片或按钮，布局被顶出横向滚动条
原因缺少单行溢出或断词处理，flex 子项默认 min-width:auto 也不会自动收缩到内容以下。
处置给文本容器加 truncate 或 break-words；需要严格控制时给 flex 子项加 min-w-0。
现象hover 效果在手机上点不动，元素看起来像坏了
原因hover 是指针设备特有伪类，触屏上没有稳定的 hover 状态，点击后样式不变化。
处置关键交互加 active: 态作为触屏回退，配合 transition-colors 让状态切换有可见反馈。
现象写的工具类完全没有生成到样式表里，构建产物里找不到
原因Tailwind 默认按扫描到的文件内容生成类名，类名写在了模板字符串拼接、动态变量或 content 未配置的路径里就扫不到。
处置把类名写成完整静态字面量，或把相关路径加入 content 配置，确保扫描范围覆盖该文件。
现象flex-1 的两个子元素宽度不对齐，或某个子元素被挤成零宽
原因父容器没设 flex-wrap 且子元素内容宽度差异大，叠加 min-width 默认值后伸缩比例与预期不符。
处置在父容器加 flex-wrap，并为需要压缩的子项加 min-w-0，避免内容最小宽度撑破布局。
现象absolute 定位的元素跑到页面边缘或被裁掉，z-index 加了也没用
原因absolute 会相对最近的定位祖先（position 非 static）定位；若祖先没有 relative/absolute，元素就相对更外层甚至初始包含块定位，同时可能被 overflow-hidden 裁剪。
处置给预期作为参照的父容器加 relative 定位，再调整 z-10 / z-50 的层叠顺序。
排障路径
1确认单列到多列的断点是否生效
class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"把三档断点同时写上并依次收窄，在浏览器里拖动窗口宽度即可看到列数在 md（≥768px）与 lg（≥1024px）处切换。若始终只有一列，先检查前缀拼写与类名是否被扫描生成。
2定位「间距为零」的根因
class="flex flex-col sm:flex-row gap-4" → 去掉 gap 换成 space-y-4 对比先用 gap-4 建立统一间距；需要仅在纵向排列时留白、切换到横向自动清除，就换成 space-y-4（仅影响相邻子元素），避免子元素首尾出现多余外边距。
3明暗双主题成对设置
class="bg-white text-gray-900 dark:bg-gray-800 dark:text-white"把基础（亮）与 dark:（暗）两组色值成对写，检查每一处背景色改动是否都有对应的文字色或边框色改动；缺一项就是对比度崩掉的来源。
4长文本溢出处理
class="truncate" / class="break-words" / 父级 "flex" + 子项 "min-w-0"单行截断用 truncate，允许换行用 break-words；卡片内 flex 布局下的子元素要加 min-w-0，否则其最小内容宽度会顶破容器产生横向滚动。
5悬停与触屏反馈
class="transition-colors hover:bg-blue-500 active:scale-95"transition-colors 让状态切换平滑；hover 负责指针设备，active 覆盖触屏点击瞬间，两者配合可确认是选择器缺失还是仅仅在触屏上不触发。
6阴影与聚焦环对比
class="shadow-lg ring-2 ring-blue-500 focus:outline-none focus:ring-2"shadow 提供静态层次感，ring 用于聚焦与交互态提示；对比两者在同一元素上的视觉重量，可以判断是否层级混乱——通常静态卡片用 shadow，表单控件用 ring。
命令示例
一行类名做出水平垂直居中卡片
<div class="flex items-center justify-center min-h-screen bg-gray-100">
<div class="w-64 rounded-lg shadow-lg bg-white p-6">
<h2 class="text-lg font-bold text-gray-900">Title</h2>
</div>
</div>min-h-screen 给外层撑满视口，flex + items-center + justify-center 完成双轴居中；内层 w-64 固定宽度配 rounded-lg 与 shadow-lg 就是标准卡片外观，不需要一条 CSS。
移动优先的三列响应式栅格
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="rounded bg-white p-4">A</div>
<div class="rounded bg-white p-4">B</div>
<div class="rounded bg-white p-4">C</div>
</div>不带前缀的 grid-cols-1 是手机样式，sm: 与 lg: 断点向上覆盖，无需写 max-width 媒体查询。因为是移动优先，桌面端的规则只会在更宽时生效，不会反过来漏掉小屏。
单行省略号
<p class="truncate max-w-sm">
A very long description that should collapse into one line with an ellipsis
</p>truncate 内部已经包含 overflow-hidden、text-ellipsis 与 whitespace-nowrap 三个属性，前提是元素宽度有上限；父级若没有 max-w-* 或 flex 约束，省略号永远不出现。
带暗色模式的按钮
<button class="px-4 py-2 rounded bg-blue-500 text-white transition hover:bg-blue-600
focus:outline-none focus:ring-2 active:scale-95 dark:bg-gray-800">
Save
</button>状态类按 hover → focus → active 的顺序写在同一串里，顺序不同最终样式不同。focus:outline-none 去掉默认焦点框时必须补一个 focus:ring-2，否则键盘用户看不到焦点位置。
flex 列表的间距与伸展
<ul class="flex flex-col divide-y">
<li class="flex items-center justify-between px-4 py-3">
<span class="flex-1 truncate">Label</span>
<span class="text-sm text-gray-500">Value</span>
</li>
</ul>flex-1 让左侧标签吃掉多余宽度并配合 truncate 省略，右侧值固定不被压缩，这是表格行不换行的标准写法；用 gap-4 而不是逐个 margin 可以避免首尾多出的边距。
常见坑与注意事项
- 类名写错不会报错，只会静默失效：truncate、size-8 这类名字拼错时页面照常渲染，只是样式没生效，排查时必须去 DevTools 确认类是否真在 CSS 里。
- size-* 只在 Tailwind 3.4 及以上存在，低版本项目里写了等于没写，需退回 w-* h-*。
- 用 fixed 定位时父级带 transform 或 filter 会让 fixed 改为相对该父级定位，元素会跑到意料之外的位置。
- 类名中不能出现空格来表示多个类，动态拼接字符串时漏掉分隔符会得到一个不存在的长类名，样式整体静默失效。
- tailwind.config 的 content 扫描不到动态拼接出来的完整类名（如 `text-${color}-500`），这些样式不会被打进产物，构建后大面积丢失颜色。
- dark: 默认跟随系统偏好（media），若产品要求手动开关必须配 darkMode: "class"；两种模式写法混用会出现「手动切了却没变化」。
提示
- Tailwind 使用移动优先的响应式设计，sm: 表示 ≥640px，md: ≥768px，lg: ≥1024px
- 使用 dark: 前缀实现暗色模式，如 dark:bg-gray-800
- 使用 @apply 指令在 CSS 中复用 Tailwind 类
- 常用颜色层级：50/100/200/300/400/500/600/700/800/900，数字越大颜色越深
- 使用 JIT（Just-in-Time）模式，只有你使用的类才会被编译，文件极小
- 任意值写法 p-[13px] w-[calc(100%-2rem)] 用来对齐设计稿的零散数值，比退回自定义 CSS 更轻。
- group-hover 需要父级先标 group，peer-* 依赖兄弟元素顺序，两者写反了样式完全不生效且不报错。
- 暗色模式切换只改 html 上的 class，组件内一律写 dark: 变体，不要在 JS 里逐个维护主题状态。
常见问题
Flex 和 Grid 都能做多列布局，什么场景该选哪个？
看是否需要同时控制两个方向。工具栏、卡片行这类「一行内排布、整体靠 justify-* 对齐」的场景用 flex：flex-row 加 gap-4 就能搞定，flex-1 让某一项吃掉剩余空间。仪表盘那种行列都要精确对齐的场景用 grid：grid-cols-12 定义骨架，col-span-2 控制每块占几列，row-span-2 处理跨行。只有一维需求时别上 grid，只有二维需求时别靠嵌套 flex 硬凑。
为什么 `sm:` 断点写在移动端样式后面却仍然生效？
因为 Tailwind 是移动优先的：基础类作用于所有屏幕，`sm:` / `md:` / `lg:` 这些前缀在 CSS 里对应 min-width 媒体查询，天然覆盖小屏默认值。sm: 是 ≥640px，md: 是 ≥768px，lg: 是 ≥1024px。因为是 min-width，多个前缀可同时命中且大的后写在层叠中胜出：写成 flex-col md:flex-row sm:flex-row-reverse 时，中等屏得到 md 的值，640px 以上再被 sm 的规则覆盖。
元素写 hidden 却还占位置，隐藏一个组件该用哪个类？
display: none 的元素既不占位也不响应交互，所以 Tailwind 的 hidden 类不会留下空间。真正出现「隐藏了却还留白」的情况，通常是误用了 invisible —— 它对应 visibility: hidden，元素继续占据原有布局位置，只是不显示，这正是它与 hidden 的关键区别。另外 overflow-hidden 只裁剪溢出内容而不隐藏元素本身；z-[-1] 把元素压到父级背景之下，也不等于隐藏。
颜色层级 50 到 900 到底怎么挑，数字大小代表什么？
同一色相下数字越大颜色越深：50-200 接近白（适合页面浅底背景），300-400 用于边框和分隔线，500-600 是正文和主按钮这类需要足够对比度的中深色，700-900 用于深色模式和文字强调。所以 bg-gray-100 配 text-gray-900 是安全组合，text-gray-400 放在白底上往往太淡；暗色模式用 dark: 前缀成对切换，如 dark:bg-gray-800 dark:text-white。同理 opacity-50 会连同文字一起变淡，需要时优先换成更浅的层级色。
长文本溢出容器时 truncate 为什么不生效，还要加哪个类？
truncate 实际是三件事的组合：overflow-hidden 裁掉溢出内容、text-ellipsis 加省略号、white-space: nowrap 禁止换行——少了 nowrap，文本会先折行，容器高度撑开，省略号永远不出现。所以父容器还需有确定宽度（w-64、max-w-lg 或在 flex/grid 里用 flex-1、min-w-0），否则元素会无限撑宽而不是溢出。多行截断不要用 truncate，改用 line-clamp 系列语义配合 overflow-hidden。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。