响应式卡片栅格：TailwindCSS 断点怎么排

写页面布局时，传统做法是先写一堆 CSS 类、再在样式文件里定义宽高间距，改一处要来回切文件。TailwindCSS 反过来：样式直接写在 HTML 标签的 class 里，用预置的工具类拼出布局，不用离开模板就能把界面调好。这篇文章用一个卡片栅格，把它的“实用优先（utility-first）”思路跑通，重点在响应式怎么用断点控制。

一、为什么用工具类而不是手写 CSS 文件

手写 CSS 的痛点是“类名和业务割裂”：标签上一个 class="card"，真正的样式在另一个文件里，改间距得跳过去找。Tailwind 把常用样式拆成一个个原子类（p-4、flex、grid），直接拼在标签上，所见即所得。好处是样式不会越写越乱——没有全局命名冲突，没有“这个 class 还有谁在用”的顾虑，删组件时样式跟着一起没。

它不是不能用自定义样式，而是大部分常见布局用工具类就够了，只有特别定制的才写进配置文件扩展。

二、用栅格画一排卡片

卡片列表最常见的需求是“一行多个、自动换行”。用 grid 加列数类就能做到，这里先写死一行三列：

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 rounded-lg bg-white shadow">卡片一</div>
  <div class="p-4 rounded-lg bg-white shadow">卡片二</div>
  <div class="p-4 rounded-lg bg-white shadow">卡片三</div>
</div>

grid-cols-3 把容器分成三列，gap-4 是卡片间距，p-4 是内边距，rounded-lg 圆角，shadow 阴影。这些都是现成类，拼起来就成型，不用写一行 CSS。

三、让它在手机上也好看：响应式断点

上面写死三列，在窄屏手机会挤成一团。Tailwind 的响应式靠“断点前缀”：在类名前加 sm:、md:、lg: 表示“达到某个屏幕宽度才生效”。默认是移动端优先，小屏单列，宽了再变多列：

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 卡片同前 -->
</div>

含义是：默认（手机）一列，sm（≥640px）两列，lg（≥1024px）三列。一套 class 覆盖从手机到桌面的所有宽度，不用媒体查询手写三遍。

四、卡片内部也用工具类排布

卡片里面放标题、描述、按钮，同样用 flex 和间距类排：

<div class="p-4 rounded-lg bg-white shadow flex flex-col gap-2">
  <h3 class="text-lg font-semibold">标题</h3>
  <p class="text-sm text-gray-500">一段说明文字</p>
  <button class="mt-2 px-3 py-1 bg-blue-600 text-white rounded">查看</button>
</div>

flex flex-col 让内容纵向排列，gap-2 控制内部间距，text-gray-500 是次要文字的灰色，bg-blue-600 是按钮底色。颜色、字号、圆角全用类表达，调样式就在标签上改，不用找 CSS 文件。

五、几个容易踩的点

第一，移动端优先是默认习惯，断点前缀只写“变多”的那一侧，别反过来写。第二，工具类堆太多会让标签变长，可以把重复结构抽成组件（Vue 的 components、React 的函数组件），Tailwind 类跟着组件走，不会散。第三，生产环境要跑构建把用到的类筛出来，未用到的会去掉，产物不会包含所有原子类。

六、小结

TailwindCSS 把“写样式”变成“在标签上拼工具类”，移动端优先 + 断点前缀让响应式布局不用手写媒体查询。卡片栅格这一例，从单列到三列只靠 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 一行就搞定。和之前手写 CSS 的页面比，它的优势在迭代快、不残留死样式，适合做后台、官网这类大量重复卡片/表单的界面。