Tailwind 响应式设计：断点与媒体查询详解

Tailwind CSS 通过断点前缀实现响应式设计。不带前缀的类（如 flex-col）在所有尺寸下生效，带前缀的类（如 md:flex-row）从 md 断点（48rem，768 px）开始生效。因此 Tailwind 默认就是移动优先：手机布局直接写，再为更大的屏幕加上前缀。本文以 Tailwind v4 为准，语法不同之处会注明 v3 的写法。

Tailwind CSS v4 的默认断点

默认没有 xs: 前缀。不带前缀的样式就是你最小的布局。具体数值可以在 Tailwind 响应式设计文档中核对。

移动优先前缀如何工作

一个典型的卡片布局：

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

从左往右读：手机上一列，640 px 起两列，1024 px 起三列并加大间距。一个常见错误是写 sm:grid-cols-1，以为它针对的是手机。sm: 的意思是“640 px 及以上”，所以手机样式不加前缀。

从纵向堆叠变为横向排列的页眉：

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

针对某个区间或最大宽度

Tailwind v4 内置了 max-* 变体，并且可以与 min-width 前缀叠加使用：

• max-md:hidden 在 768 px 以下隐藏元素。
• md:max-lg:flex 只在 768 px 到 1024 px（不含）之间生效。

一次性的数值可以用任意断点：min-[900px]:grid-cols-4 或 max-[420px]:text-sm。不要滥用；如果某个数值在多处出现，就把它定义成具名断点。

添加或修改断点

在 v4 中，断点是在 CSS 里定义的主题变量：

@import "tailwindcss";

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

这样就有了 xs: 和 3xl: 前缀。要修改现有断点，重新定义即可（--breakpoint-md: 50rem;）。要删除某个默认断点，把它设为 initial。

在 Tailwind v3 中，同样的配置写在 tailwind.config.js 的 theme.screens 里（若要保留默认值，则写在 theme.extend.screens）。

请使用 rem 值，这样断点能照顾到修改了浏览器默认字号的用户。至于宽度本身怎么选，请参阅响应式断点。

在自己的 CSS 中写媒体查询

有些组件用 CSS 写更方便。在 v4 中，你也可以在 CSS 里复用 Tailwind 的断点：

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant 接受与类名相同的变体名称，所以 @variant lg 或 @variant dark 的用法完全一样。媒体查询的通用语法请参阅 CSS 媒体查询指南。

其他值得了解的响应式变体

• portrait: 和 landscape:：屏幕方向。
• dark:：深色模式（默认基于 prefers-color-scheme，除非你配置了基于类的策略）。
• motion-reduce: 和 motion-safe:：减少动态效果的偏好设置。
• print:：打印样式。
• v4 中的 hover: 只在支持悬停的设备上生效，因此在触屏上点按后，悬停效果不会再“卡住”。

Tailwind 中的容器查询

断点响应的是视口，容器查询响应的是父元素的宽度，适合那些既会出现在宽栏、也会出现在窄栏中的可复用组件。v4 已内置容器查询：

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

这里的 @md: 指的是容器宽度（默认 28rem），而不是屏幕宽度。在 v3 中需要使用官方插件 @tailwindcss/container-queries。

在手机上测试 Tailwind 布局

在 Tailwind 里添加断点很容易，忘记检查也同样容易。开发时：

1. 在编辑器旁边常开一个手机尺寸的视图。可以用 Chrome DevTools 的设备模式，也可以用 Mobile View Extension：一键开启，可在 localhost 上运行，切换页面时保持手机外框。
2. 在 DevTools 设备工具栏中开启 Show media queries，Tailwind 的断点会以横条显示，点击即可跳转。
3. 每个断点都在精确宽度和小 1 px 的宽度下各测一次，例如 767 px 和 768 px。

完整的测试方法见如何测试响应式设计。

常见问题

Tailwind CSS 的断点是多少？

默认是：sm 40rem（640 px）、md 48rem（768 px）、lg 64rem（1024 px）、xl 80rem（1280 px）和 2xl 96rem（1536 px）。每个断点都从对应宽度起生效。

在 Tailwind 中如何只针对手机写样式？

手机样式不加前缀，再在更大尺寸下覆盖。如果某个样式只需要在某个宽度以下生效，就用 max-* 变体，例如 max-sm: 或 max-md:。

Tailwind 的媒体查询是 min-width 还是 max-width？

是 min-width。每个默认断点前缀都从对应宽度起生效，这就是移动优先的做法。