Tailwind CSS 响应式断点怎么用？常用类有哪些？

Tailwind CSS 做响应式设计，核心不是写很多媒体查询，而是在工具类前面加断点前缀。无前缀的类先作为移动端默认样式，md:、lg: 这类前缀再从指定宽度开始覆盖它。

一句话记法：默认写手机样式，屏幕变大后再逐步加前缀调整布局、字号、间距、显示隐藏和宽度。

Tailwind CSS 默认断点有哪些？

Tailwind CSS 默认断点是移动优先的 min-width 断点：sm 640px，md 768px，lg 1024px，xl 1280px，2xl 1536px。

html
<div class="text-sm md:text-base lg:text-lg">Tailwind 响应式文本</div>

这段代码的含义是：默认 text-sm，当视口宽度达到 768px 后变成 text-base，达到 1024px 后变成 text-lg。

断点前缀到底怎么生效？

Tailwind 的响应式前缀默认是“从这个断点开始，一直向更大的屏幕生效”。

html
<div class="w-full md:w-1/2 lg:w-1/3">响应式宽度</div>

小于 768px 是 w-full，768px 到 1023px 是 md:w-1/2，1024px 及以上是 lg:w-1/3。md:w-1/2 不是只在平板生效，而是从 md 开始生效。

常用响应式类怎么写？

移动端和桌面端切换导航时最常用：

html
<button class="block md:hidden">菜单</button>
<nav class="hidden md:flex">桌面导航</nav>

移动端常用纵向堆叠，桌面端改成横向：

html
<section class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
  <div>标题区域</div>
  <div>操作按钮</div>
</section>

列表页、商品卡片、文章卡片通常这样写：

html
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <article class="rounded-lg border p-4">Card</article>
</div>

卡片宽度不固定时，也可以用：

html
<div class="grid grid-cols-[repeat(auto-fit,minmax(240px,1fr))] gap-4">
  <article class="rounded-lg border p-4">Card</article>
</div>

标题、正文、间距、宽度也都可以响应式调整：

html
<h2 class="text-2xl font-semibold leading-tight md:text-4xl lg:text-5xl">Responsive Design</h2>
<p class="text-sm leading-6 md:text-base md:leading-7">正文内容</p>
<main class="mx-auto w-full max-w-7xl px-4 md:px-6 lg:px-8">页面内容</main>

max-*、范围断点和容器查询

max-* 适合低于某个断点时生效：

html
<div class="max-md:hidden">只在 md 以下隐藏</div>

只在某个区间生效：

html
<div class="hidden md:max-lg:block">只在 md 到 lg 之间显示</div>

如果默认断点不够，可以自定义 screens。v3 在 tailwind.config.js 里配置，v4 更推荐在 CSS 主题变量里定义：

css
@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

容器查询看的是父容器宽度，不是浏览器视口宽度，适合可复用卡片、侧边栏模块和 Dashboard 小组件：

html
<div class="@container">
  <article class="p-4 @md:flex @md:items-center @md:gap-6">
    <img class="w-full @md:w-48" src="/cover.jpg" alt="" />
    <div>
      <h2 class="text-lg @md:text-xl">文章标题</h2>
      <p class="text-sm text-gray-600">摘要内容</p>
    </div>
  </article>
</div>

页面大框架用屏幕断点，组件内部适配用容器查询，通常更稳。

常见坑和检查顺序

md:block 会从 768px 一直生效到更大的屏幕，不是只在平板显示。如果只想在 md 到 lg 之间显示，要写 hidden md:max-lg:block。

不要忘了写默认样式：md:grid md:grid-cols-2 在移动端没有明确布局，通常不如 grid grid-cols-1 md:grid-cols-2 清楚。

显示隐藏类别叠太多层，否则后面维护的人很容易误判。测试时要看真实内容：长标题、长按钮文案、空数据、图片缺失、横竖屏、浏览器缩放和系统字号。

快速检查一段响应式代码，可以先看无前缀类，再看 sm:、md:、lg: 是否从小到大覆盖；检查 hidden、block、flex 有没有互相打架；检查 grid-cols-*、w-*、max-w-* 是否会造成横向滚动；如果组件会放在不同容器里，考虑用容器查询而不是继续加屏幕断点。