TailwindCSS 响应式设计怎么写？断点、容器查询和测试怎么做？

TailwindCSS 做响应式设计，不是给每个设备单独写一套样式，而是先写移动端默认样式，再在需要变宽时用断点前缀覆盖。没有前缀的类会一直生效；sm:、md:、lg:、xl:、2xl: 这类前缀表示“从这个宽度开始改成另一种样子”。

默认断点怎么理解？

TailwindCSS 默认断点是 mobile-first，也就是基于 min-width：sm 640px，md 768px，lg 1024px，xl 1280px，2xl 1536px。

html
<div class="w-full md:w-1/2 lg:w-1/3">内容区域</div>

这段代码的意思是：默认宽度 100%，屏幕到 md 后变成 50%，到 lg 后变成 33.333%。它不是“只在 md 生效”，而是“从 md 开始生效，直到被更大的断点覆盖”。

响应式前缀可以加在任何工具类前

尺寸、间距、颜色、定位、显示隐藏、Grid、Flex、字体都一样。

html
<section class="px-4 py-6 sm:px-6 md:py-10 lg:px-8">
  <h2 class="text-2xl md:text-4xl lg:text-5xl">响应式标题</h2>
  <p class="mt-3 text-sm leading-6 md:text-base md:leading-7">正文在移动端更紧凑，在桌面端更舒展。</p>
</section>

常见写法是先给移动端一个舒服的默认值，再在关键宽度上调整：字体、间距、圆角、阴影、排列方向都可以这样处理。

hidden 和 block 怎么配合？

显示隐藏最容易写反。记住：没有前缀的是默认状态，带前缀的是达到断点后的状态。

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

如果只在某个区间显示，可以组合：

html
<div class="hidden md:block lg:hidden">平板专用提示</div>

不要用它复制两份完整内容，否则维护和无障碍都会变麻烦。

Grid 布局怎么响应式变化？

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

如果卡片宽度比设备类型更重要，可以用自适应网格：

html
<div class="grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-4">
  <article class="rounded-xl border p-4">自动换行的卡片</article>
</div>

max-* 和任意断点怎么用？

默认的 md: 是 min-width，但有些样式只想在小屏生效，可以用 max-*：

html
<div class="max-md:rounded-none max-md:border-x-0 md:rounded-2xl md:border">移动端贴边，桌面端卡片化</div>

也可以使用任意断点：

html
<div class="grid grid-cols-1 min-[720px]:grid-cols-2 min-[1100px]:grid-cols-3">内容列表</div>

任意断点适合修明确的布局问题，不适合替代设计系统断点。如果同一个宽度在多处出现，最好沉淀成自定义 screen。

如何自定义 screens？

Tailwind v3 通常在 tailwind.config.js 里配置：

js
module.exports = {
  theme: {
    extend: {
      screens: {
        xs: '475px',
        '3xl': '1600px',
        tablet: { min: '640px', max: '1023px' },
      },
    },
  },
}

Tailwind v4 更推荐在 CSS 主题变量里定义断点：

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

TailwindCSS v4 的容器查询怎么用？

视口断点看的是浏览器宽度，容器查询看的是父容器宽度。组件库、侧边栏卡片、后台面板很需要它。

html
<div class="@container rounded-2xl border p-4">
  <article class="flex flex-col gap-4 @md:flex-row @lg:gap-6">
    <div class="h-32 rounded-xl bg-slate-200 @md:w-48"></div>
    <div>
      <h3 class="text-lg font-semibold @lg:text-xl">容器查询卡片</h3>
      <p class="mt-2 text-sm text-slate-600 @lg:text-base">父容器变宽后，卡片内部再切换布局。</p>
    </div>
  </article>
</div>

md: 看视口宽度，@md: 看最近的 @container 容器宽度。页面骨架用视口断点，组件内部用容器查询，通常最清楚。

响应式字体、间距和测试

字体不要只想着“大屏就变大”。中文页面在移动端如果行高太紧，会比字号小更难读。可以同时调整字号、行高和容器宽度：

html
<article class="mx-auto max-w-prose px-4 py-6 sm:px-6 lg:px-8">
  <h2 class="text-2xl leading-tight md:text-4xl md:leading-tight">TailwindCSS 响应式设计</h2>
  <p class="mt-4 text-base leading-7 text-slate-700 md:text-lg md:leading-8">移动端先保证可读，桌面端再增加留白和信息密度。</p>
</article>

测试时至少看默认断点前后、长标题、长按钮文案、空数据、图片缺失、横竖屏、浏览器缩放和系统字号。响应式问题很多不是“看起来能不能排下”，而是手指点起来舒不舒服、文字读起来累不累。

TailwindCSS 的响应式设计核心就是两句话：先让移动端自然可用，再在内容需要的时候逐步增强；页面级布局看视口，组件级布局看容器。