响应式设计

Tailwind 的响应式被公认为它最优雅的设计之一。在任何工具类前面加 sm: / md: / lg: / xl: 前缀,就表示"该尺寸及以上才生效"。配合"移动优先"思想,你可以在同一个元素上表达所有断点的样式,而不用像传统 CSS 那样写一堆 media query。

1. 五个默认断点

Tailwind 内置了 5 个断点,覆盖从小手机到大桌面:

<!-- Tailwind 默认断点:
     sm   ≥ 640px   小屏手机横屏 / 大手机
     md   ≥ 768px   平板竖屏(iPad)
     lg   ≥ 1024px  平板横屏 / 小笔记本
     xl   ≥ 1280px  桌面
     2xl  ≥ 1536px  大桌面

     规律:前缀代表"该尺寸【及以上】生效"
     这是"移动优先"的核心 -->

这套断点是行业主流,Bootstrap、Bulma 也都采用类似数值。无需修改默认值就能匹配 99% 项目。

2. 移动优先(Mobile First)

这是 Tailwind 响应式的核心思想,必须先理解:

传统 PC 优先写法是"默认桌面,小屏时改成手机"。Tailwind 反过来——默认就是手机样式,大屏前缀逐步覆盖。原因是:移动端样式更简单(单列、小字),从简单到复杂比反过来更自然。

<!-- 移动优先:默认样式针对最小屏,前缀逐步覆盖到大屏 -->

<!-- 错误想法(传统 PC 优先):
     "默认是桌面,小屏时改成手机样式" -->

<!-- 正确想法(移动优先):
     "默认是手机,大屏时升级成桌面样式" -->

<!-- 例:手机 1 列、平板 2 列、桌面 3 列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- 解读:
     默认(<640px)   => grid-cols-1 (1 列)
     ≥640px         => sm:grid-cols-2 (2 列)
     ≥1024px        => lg:grid-cols-3 (3 列)
     sm 和 lg 之间(640~1024)的样式自动继承 sm 的 2 列 -->

关键解读技巧:

3. 响应式显隐(高频模式)

响应式显隐是 Tailwind 最常用的功能之一——比如手机端显示汉堡菜单、桌面端显示完整导航:

<!-- 响应式显隐:极其常用 -->

<!-- 仅大屏显示(手机隐藏) -->
<div class="hidden lg:block">桌面侧边栏</div>

<!-- 仅手机显示(大屏隐藏) -->
<div class="block lg:hidden">手机汉堡菜单</div>

<!-- 在 md 及以上显示,以下隐藏 -->
<div class="hidden md:flex">平板+ 显示</div>

<!-- 套路:
     hidden        => 默认隐藏
     <prefix>:block/flex/grid => 指定断点及以上显示
     反过来:
     block/flex    => 默认显示
     <prefix>:hidden => 指定断点及以上隐藏 -->

4. 响应式文字

标题在手机上往往太大,需要响应式调整:

<!-- 响应式字号:手机小字、桌面大字 -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold">
  响应式标题
</h1>

<!-- 响应式对齐:手机左对齐、桌面居中 -->
<div class="text-left md:text-center">
  内容
</div>

<!-- 响应式间距 -->
<div class="p-4 md:p-8 lg:p-12">
  内边距随屏幕放大
</div>

<!-- 响应式 flex 方向:手机纵向、桌面横向 -->
<div class="flex flex-col md:flex-row gap-4">
  <div>A</div>
  <div>B</div>
</div>

这套模式几乎可以套用到所有属性:字号、对齐、padding、margin、flex 方向、grid 列数、颜色……任何类都能加前缀。

5. 一个完整的响应式页面

把上面所有套路组合起来,写一个真实场景的卡片墙:

<!-- 一个完整的响应式卡片墙 -->
<section class="px-4 md:px-8 lg:px-12 py-8">
  <h2 class="text-2xl md:text-3xl font-bold mb-6">产品列表</h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
    <article class="bg-white rounded-lg shadow p-4 md:p-6">
      <img src="product.jpg" class="w-full h-32 md:h-40 object-cover rounded" />
      <h3 class="mt-3 text-base md:text-lg font-semibold">产品名</h3>
      <p class="text-xs md:text-sm text-gray-500 mt-1">说明</p>
      <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white
                     text-sm md:text-base py-2 rounded">
        购买
      </button>
    </article>
  </div>
</section>

这一段就实现了"手机单列小字、平板双列中字、桌面三/四列大字"的完整体验。不写一行 CSS 规则,在传统方案里这是不可想象的简洁。

6. 调试响应式的技巧

7. 自定义断点

如果默认断点不合适(比如要做"超大屏 TV 版"),可以自定义:

// 自定义断点(在 tailwind.config.js)
module.exports = {
  theme: {
    screens: {
      'xs': '425px',     // 加一个超小屏断点
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
};

// 之后可以用 xs:bg-red-500 等;
// 注意:直接写 screens 会覆盖默认值,
// 想保留默认 + 新增,应该用 theme.extend.screens

8. 常见模式速查

9. 何时真的需要 media query?

Tailwind 的前缀已经覆盖了 95% 场景。少数情况下你仍需要 media query:

这些前缀 Tailwind 都内置了。基本不用手写 media query。

小结

记住核心规律:

下一篇讲状态前缀,让元素在 hover/focus 等交互态下变化样式。

← 上一篇 字体与排版

下一篇 状态前缀 →

✈️💬