11. 响应式设计：断点系统

Tailwind 的响应式设计基于一个核心理念：先写移动端样式，再逐步增强到大屏。

五个默认断点

前缀	最小宽度	典型设备
sm	40rem (640px)	大屏手机/小平板
md	48rem (768px)	平板
lg	64rem (1024px)	笔记本
xl	80rem (1280px)	桌面显示器
2xl	96rem (1536px)	大屏显示器

基本用法

在工具类前面加断点前缀，就能让这个样式在该断点及以上生效：

<img class="w-16 md:w-32 lg:w-48" src="..." />

解读：

• 默认（手机）：宽 4rem (64px)
• sm 及以上：还是 4rem（没覆盖）
• md 及以上：宽 8rem (128px)
• lg 及以上：宽 12rem (192px)

Mobile-First 思维

这是新手最容易搞混的点：无前缀的样式是给移动端写的，不是给桌面端。

<!-- 错误示范 -->
<div class="text-center">手机居中？不是，这是所有屏幕都居中</div>

<!-- 正确做法：手机居中，桌面左对齐 -->
<div class="text-center sm:text-left">

实战示例

一个典型的营销页面布局：

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" />
    </div>
    <div class="p-8">
      <h2 class="text-lg font-bold">标题</h2>
      <p class="mt-2 text-gray-500">描述文字...</p>
    </div>
  </div>
</div>

解读：

• 手机：图片在上，文字在下（block 布局）
• md 及以上：图片和文字并排（md:flex）

限定范围：max-*

如果只想在某个区间生效，用 max-* 前缀：

<div class="md:max-xl:flex">
  <!-- 只在 md 到 lg 之间是 flex -->
</div>

可用的 max-* 变体：max-sm、max-md、max-lg、max-xl、max-2xl。

自定义断点

在 CSS 里用 @theme 覆盖或新增：

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

然后就能用 xs:grid-cols-2、3xl:grid-cols-6 了。

移除默认断点

@theme {
  --breakpoint-2xl: initial;  /* 移除 2xl */
}

或者全部重置，从头定义：

@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

容器查询（v4 新特性）

响应式不一定只看视口宽度。容器查询让你根据父容器宽度来调整样式：

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- 容器宽度 >= 28rem 时变横向 -->
  </div>
</div>

给父元素加 @container，子元素用 @sm、@md 等前缀响应容器宽度。

容器断点比视口断点更细，从 @3xs (16rem) 到 @7xl (80rem)。

命名容器

多个嵌套容器时，给容器命名避免歧义：

<div class="@container/main">
  <div class="flex flex-row @sm/main:flex-col">
    <!-- 响应名为 main 的容器 -->
  </div>
</div>

尺寸容器

需要用到 cqb、cqh 这种依赖 block-size 的单位时，用 @container-size：

<div class="@container-size">
  <div class="h-[50cqb]">高度是容器高度的 50%</div>
</div>

下一章我们学深色模式。