Tailwind CSS 响应式设计

前两篇讲了 Flexbox 和 Grid 的静态布局。本篇讲响应式设计，让页面在手机、平板、桌面上都好看。Tailwind v4 默认是移动优先策略。

响应式基础

移动优先原则

移动优先的意思是，基础类名只针对小屏幕生效，大屏幕通过断点变体逐步增强。不要先写桌面样式再用 max-* 往回改，那样维护起来很麻烦。

<div class="text-sm md:text-base lg:text-lg">
  文字随屏幕变大
</div>

这里 text-sm 对所有屏幕生效，md:text-base 只在 ≥768px 时覆盖，lg:text-lg 只在 ≥1024px 时覆盖。

断点变体

Tailwind v4 内置这些断点，名称即「在该宽度及以上生效」。

断点变体可以加在几乎所有工具类前面，比如布局、文字、间距。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-blue-100">卡片</div>
  <div class="p-4 bg-blue-100">卡片</div>
  <div class="p-4 bg-blue-100">卡片</div>
</div>

约束内容宽度

用 container 类约束内容宽度

container 类是一个开箱即用的布局工具：它会让元素宽度跟随当前断点变化，并在每个断点处取该断点对应的最大宽度，同时水平居中（margin-left/right: auto）。常用它把正文「包」在一个不会过宽的容器里，避免大屏上文字拉得太长。

<div class="container mx-auto px-4">
  <h1>标题</h1>
  <p>正文内容……</p>
</div>

container 在各断点的大致上限是：<576px 满宽受父级约束，sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px。配合 mx-auto 居中、px-4 留左右内边距即可。

如果你不想用 container 类，也可以手动写 max-w-3xl mx-auto 这类固定最大宽度，效果类似，只是宽度不会随断点阶梯变化。

在布局中用断点

在布局与间距上用断点

断点不只用于网格，也能改 Flex 方向和间距。

<div class="flex flex-col md:flex-row gap-2 md:gap-6">
  <div class="p-4 bg-green-100">侧栏</div>
  <div class="p-4 bg-green-100">内容</div>
</div>

手机上 flex-col 竖向堆叠，平板上 md:flex-row 改成横向，md:gap-6 同时加大间距。

反向断点

有时需要「只在小于某宽度时生效」，v4 支持 max-* 反向变体。

<div class="max-md:flex-col md:flex-row">
  <div class="p-4 bg-yellow-100">A</div>
  <div class="p-4 bg-yellow-100">B</div>
</div>

max-md:flex-col 表示在小于 md（<768px）时竖向排列，大于等于 md 时由 md:flex-row 接管。两种写法结果一致，按团队习惯选择。

实战：随屏幕变化列数的卡片网格

综合前面知识，做一个从 1 列到 4 列渐变的卡片墙。

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 p-4">
  <div class="p-6 bg-gray-100 rounded">卡片 1</div>
  <div class="p-6 bg-gray-100 rounded">卡片 2</div>
  <div class="p-6 bg-gray-100 rounded">卡片 3</div>
  <div class="p-6 bg-gray-100 rounded">卡片 4</div>
  <div class="p-6 bg-gray-100 rounded">卡片 5</div>
  <div class="p-6 bg-gray-100 rounded">卡片 6</div>
</div>

手机 1 列，≥640px 2 列，≥1024px 3 列，≥1536px 4 列。无需写任何媒体查询，全靠断点变体。

小结

响应式的关键是把基础样式留给小屏，再用 sm:/md:/lg:/xl:/2xl: 逐级增强，必要时用 max-* 反向断点。下一篇讲状态与变体，让元素在交互时改变样式。