Tailwind 速查:常用类名按场景查,比翻文档快十倍

写 Tailwind 最折磨人的不是不会用,而是记不住类名。padding 是 p- 还是 padding-?垂直居中那一串到底是 items-center 还是 align-center?断点 md 是 760 还是 768?这些东西每天都用,可就是记不牢,结果每次都得开一个文档标签页翻半天。这篇把最高频的几类整理成按场景查的速查,配一个能直接抄的例子,你照着用就行。

实用优先:类名就是样式,不用起名

Tailwind 的核心思路是工具类,一个类只干一件事。pt-4 就是 padding-top 设成 1rem,text-red-500 就是把字设成某个红。你在一个元素上拼几十个这样的小类,而不是另起一个 CSS 类名再去 .css 文件里写规则。

这套写法最大的解放是:不用再为命名头疼。以前一个小标题你得纠结叫 .card-header-subtitle 还是 .card-title-sub,现在直接 text-sm font-medium text-slate-500 贴上去,样式即代码,看一眼就知道长什么样。代价是 HTML 行会变长,但比起维护一份和组件越走越远的样式表,这个代价多数团队都认。

flex 和 grid:布局两把刷子

布局这块用得最多。横向排一行、两端对齐、垂直居中,这是最经典的组合:

<div class="flex items-center justify-between">

flex 开启弹性盒,items-center 管交叉轴居中(默认横排时就是垂直居中),justify-between 让子元素两端顶格、中间均分空隙。导航栏的 logo 和菜单、卡片的标题和按钮,基本都是这一串。

grid 适合二维布局。grid grid-cols-3 是三等分列,gap-4 给单元格之间留 16px 间距,col-span-2 让某个格子跨两列。常用的就这几个,记住 grid-cols-N 配 gap-N 就能搭出绝大多数卡片墙。

间距和颜色:刻度记住一个换算

间距类全是刻度制:p-4 是 padding 1rem,m-6 是 margin 1.5rem,gap-2 是 8px 间隙。换算口诀就一条,数字乘以 4 就是像素值,所以 p-6 是 24px、gap-4 是 16px、m-3 是 12px。设计稿写 padding 24px,你直接写 p-6,不用心算。

颜色按 属性-色名-明度 组合:bg-cyan-500 背景青色,text-slate-700 字深灰,border-rose-300 边框浅玫红。明度从 50(最浅)到 950(最深),数字越大越深。要做渐变背景,直接 bg-gradient-to-r from-cyan-500 to-pink-500 这一串,具体配色可以先用我们的渐变生成器调好再抄类名。

响应式断点:移动优先,往上覆盖

这是最容易踩坑的一块。Tailwind 是移动优先的,没前缀的类对所有宽度生效,带 md: 的类从中等屏起生效。所以 text-sm md:text-base lg:text-lg 的意思是:手机 sm、平板 base、桌面 lg。

断点是 min-width:sm = 640、md = 768、lg = 1024、xl = 1280、2xl = 1536。心智模型很重要,先写最小屏的版本不加前缀,再用 md: 往上覆盖,而不是反过来。一个常见误会是以为 md:hidden 只在中等屏隐藏,其实它是中等屏及以上都隐,桌面也跟着没了。

状态变体:hover、focus、暗色模式

交互态在类名前面加前缀就行。hover:bg-cyan-600 是悬停变深,disabled:opacity-50 是禁用时变淡,dark:bg-slate-800 是暗色模式换底色。前缀还能叠,md:hover:bg-cyan-600 就是中等屏及以上悬停才换色。

这里有个我每次都要提醒同事的点:按钮的聚焦态优先用 focus-visible: 而不是 focus:。普通 focus: 鼠标点击也会触发,留一圈难看的轮廓;focus-visible: 只在键盘聚焦时才显示轮廓,做无障碍正该用它。

和写 CSS 比,到底省在哪

我自己从纯手写 CSS 切过来,最直观的感受是上下文切换变少了。以前改一个间距,得先在 JSX 里找到 className,再跳到对应的 .css 文件,定位到那条规则,改完还要担心别处有没有引用同一个类。现在间距就写在标签上,p-4 改成 p-6 一步到位,改完即所见,不用来回跳文件,也不用怕误伤别的组件。当然 Tailwind 不是要取代 CSS,真正复杂的动画或者全局变量该写原生还得写,这时候用 CSS 格式化工具把手写那部分理顺也方便。

类名记不全的时候,别硬背。打开 Tailwind CSS 速查表,100+ 个类分十二大类,每一条旁边都有实时预览,写 shadow-xl 你直接看见阴影、写 rounded-2xl 看见圆角,按类名或说明一搜就出,一键复制贴回项目。把它钉在标签页里,比翻官方文档省事得多。

Made by Toolora · Updated 2026-06-13