响应式设计

Tailwind CSS 内置了移动优先的响应式断点系统，让你能够轻松构建适配各种屏幕尺寸的界面。本章将详细介绍如何使用响应式工具类。

移动优先原则

Tailwind 采用移动优先（Mobile-First）的设计理念，这意味着：

默认样式应用于所有屏幕尺寸
使用断点前缀覆盖更大屏幕的样式

<div class="text-center md:text-left">
  默认居中，中等屏幕以上左对齐
</div>

注意

不要用 sm: 来针对移动设备。sm: 表示"小屏幕及以上"，而不是"仅小屏幕"。

断点系统

Tailwind 默认提供 5 个断点：

前缀	最小宽度	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

断点使用

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
  宽度随屏幕尺寸变化
</div>

这个例子中：

默认（移动端）：宽度 100%
sm（640px+）：宽度 50%
md（768px+）：宽度 33.33%
lg（1024px+）：宽度 25%
xl（1280px+）：宽度 20%

响应式布局

网格布局

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
  <div class="bg-blue-500 p-4">5</div>
  <div class="bg-blue-500 p-4">6</div>
</div>

Flexbox 布局

<div class="flex flex-col sm:flex-row gap-4">
  <div class="bg-blue-500 p-4 flex-1">项目 1</div>
  <div class="bg-blue-500 p-4 flex-1">项目 2</div>
  <div class="bg-blue-500 p-4 flex-1">项目 3</div>
</div>

显示与隐藏

<div class="hidden md:block">
  仅在中等屏幕以上显示
</div>

<div class="md:hidden">
  仅在中等屏幕以下显示
</div>

<div class="hidden lg:block xl:hidden">
  仅在 lg 断点显示
</div>

最大宽度断点

使用 max-* 前缀设置最大宽度断点：

前缀	最大宽度	CSS
max-sm	639.98px	@media (max-width: 639.98px)
max-md	767.98px	@media (max-width: 767.98px)
max-lg	1023.98px	@media (max-width: 1023.98px)
max-xl	1279.98px	@media (max-width: 1279.98px)
max-2xl	1535.98px	@media (max-width: 1535.98px)

<div class="max-md:text-center">
  仅在中等屏幕以下居中
</div>

断点范围

组合使用 min-* 和 max-* 创建断点范围：

<div class="md:max-lg:bg-blue-500">
  仅在 md 到 lg 之间显示蓝色背景
</div>

任意断点值

使用方括号语法设置任意断点：

<div class="min-[320px]:text-center">
  320px 以上居中
</div>

<div class="max-[600px]:bg-red-500">
  600px 以下红色背景
</div>

响应式设计最佳实践

从移动端开始设计

<div class="p-4 md:p-6 lg:p-8">
  先写移动端样式，再逐步添加大屏样式
</div>

使用组件思维

function Card({ title, description }) {
  return (
    <div className="p-4 sm:p-6 bg-white rounded-lg shadow-md">
      <h3 className="text-lg sm:text-xl font-semibold">{title}</h3>
      <p className="mt-2 text-gray-600">{description}</p>
    </div>
  )
}

避免过度嵌套

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div class="p-4">
    <div class="bg-white rounded-lg p-4 sm:p-6">
      内容
    </div>
  </div>
</div>

容器查询

容器查询让你可以根据容器大小而非视口大小来应用样式。

基本用法

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    根据容器宽度调整布局
  </div>
</div>

容器断点

前缀	最小宽度
@3xs	16rem (256px)
@2xs	18rem (288px)
@xs	20rem (320px)
@sm	24rem (384px)
@md	28rem (448px)
@lg	32rem (512px)
@xl	36rem (576px)
@2xl	42rem (672px)
@3xl	48rem (768px)
@4xl	56rem (896px)
@5xl	64rem (1024px)
@6xl	72rem (1152px)
@7xl	80rem (1280px)

命名容器

<div class="@container/main">
  <div class="@lg/main:grid-cols-2">
    根据命名容器调整样式
  </div>
</div>

实战示例

响应式导航栏

<nav class="bg-blue-500 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white font-bold text-xl">Logo</div>
    
    <button class="md:hidden text-white">
      菜单
    </button>
    
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-blue-200">首页</a>
      <a href="#" class="text-white hover:text-blue-200">产品</a>
      <a href="#" class="text-white hover:text-blue-200">关于</a>
      <a href="#" class="text-white hover:text-blue-200">联系</a>
    </div>
  </div>
</nav>

响应式卡片网格

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="image.jpg" alt="" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="font-semibold text-lg">卡片标题</h3>
      <p class="text-gray-600 mt-2">卡片描述内容</p>
    </div>
  </div>
</div>

响应式表单

<form class="max-w-2xl mx-auto p-4 sm:p-6">
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
    <div>
      <label class="block text-gray-700 mb-2">名</label>
      <input class="w-full px-4 py-2 border rounded" type="text">
    </div>
    <div>
      <label class="block text-gray-700 mb-2">姓</label>
      <input class="w-full px-4 py-2 border rounded" type="text">
    </div>
  </div>
  <div class="mt-4 sm:mt-6">
    <label class="block text-gray-700 mb-2">邮箱</label>
    <input class="w-full px-4 py-2 border rounded" type="email">
  </div>
  <button class="mt-6 w-full sm:w-auto bg-blue-500 text-white px-6 py-2 rounded">
    提交
  </button>
</form>

响应式图片画廊

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
  <div class="aspect-square">
    <img src="image1.jpg" alt="" class="w-full h-full object-cover rounded">
  </div>
  <div class="aspect-square">
    <img src="image2.jpg" alt="" class="w-full h-full object-cover rounded">
  </div>
  <div class="aspect-square">
    <img src="image3.jpg" alt="" class="w-full h-full object-cover rounded">
  </div>
  <div class="aspect-square">
    <img src="image4.jpg" alt="" class="w-full h-full object-cover rounded">
  </div>
</div>

响应式侧边栏布局

<div class="flex flex-col lg:flex-row gap-6">
  <aside class="w-full lg:w-64 shrink-0">
    <div class="bg-white rounded-lg shadow p-4">
      <h3 class="font-semibold mb-4">侧边栏</h3>
      <nav class="space-y-2">
        <a href="#" class="block py-2 px-4 rounded hover:bg-gray-100">菜单项 1</a>
        <a href="#" class="block py-2 px-4 rounded hover:bg-gray-100">菜单项 2</a>
        <a href="#" class="block py-2 px-4 rounded hover:bg-gray-100">菜单项 3</a>
      </nav>
    </div>
  </aside>
  <main class="flex-1">
    <div class="bg-white rounded-lg shadow p-4 sm:p-6">
      <h2 class="text-xl font-semibold mb-4">主要内容</h2>
      <p class="text-gray-600">
        这是主要内容区域，在小屏幕上会显示在侧边栏下方。
      </p>
    </div>
  </main>
</div>

自定义断点

在配置文件中自定义断点：

export default {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
  },
}

或者在 CSS 中使用 @theme：

@import "tailwindcss";

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

小结

本章介绍了 Tailwind CSS 的响应式设计：

移动优先：默认样式应用于移动端，断点覆盖大屏
断点系统：sm、md、lg、xl、2xl 五个默认断点
最大宽度断点：使用 max-* 前缀
断点范围：组合 min-* 和 max-* 创建范围
容器查询：根据容器大小而非视口大小应用样式
最佳实践：从移动端开始设计，使用组件思维

下一章，我们将学习 Tailwind CSS 的状态样式。

移动优先原则​

断点系统​

断点使用​

响应式布局​

网格布局​

Flexbox 布局​

显示与隐藏​

最大宽度断点​

断点范围​

任意断点值​

响应式设计最佳实践​

从移动端开始设计​

使用组件思维​

避免过度嵌套​

容器查询​

基本用法​

容器断点​

命名容器​

实战示例​

响应式导航栏​

响应式卡片网格​

响应式表单​

响应式图片画廊​

响应式侧边栏布局​

自定义断点​

小结​