Tailwind CSS 响应式断点：完整布局用法

jiawen

2026/05/02

2026/05/06

公开

默认分类

290

Tailwind 响应式布局的核心是移动端优先 + 断点前缀，所有布局工具类（flex/grid/container等）都能直接加断点前缀，快速实现手机、平板、电脑的自适应布局。

下面从核心规则 → 基础布局工具 → 高频布局场景 → 完整实战页面，全覆盖最实用的布局用法。

一、布局核心前提（必记）

移动端优先 不写前缀 → 手机（<640px）生效；加 sm/md/lg/xl/2xl 前缀 → ≥ 对应宽度 生效。
断点优先级：2xl > xl > lg > md > sm > 无前缀
所有布局类通用：flex/grid/width/margin/hidden 等都能加断点。

二、5大核心布局工具 + 响应式用法

这是做布局必用的5个工具，配合断点就能搞定90%的页面布局。

1. 响应式容器（页面居中 wrapper）

container 是 Tailwind 内置的自适应居中容器，自动匹配断点宽度，搭配 mx-auto 水平居中。


1<!-- 最外层页面容器：手机满宽，大屏自动居中+内边距 -->
2<div class="container mx-auto px-4 sm:px-6 lg:px-8">
3  所有页面内容放在这里
4</div>

px-4：手机左右内边距
sm:px-6：平板加大内边距
lg:px-8：电脑再加大内边距

2. 响应式弹性布局（Flex → 导航/两栏/垂直水平排列）

最常用布局：移动端垂直堆叠，平板/电脑水平排列。父元素加 flex，配合断点改方向/对齐/宽度。

示例1：响应式导航栏


1<!-- 手机：垂直排列；≥md（平板）：水平排列 -->
2<nav class="flex flex-col md:flex-row justify-between items-center p-4">
3  <div class="logo">Logo</div>
4  <!-- 手机隐藏导航，平板显示 -->
5  <ul class="hidden md:flex gap-6">
6    <li>首页</li>
7    <li>产品</li>
8    <li>关于</li>
9  </ul>
10  <!-- 手机显示菜单按钮，平板隐藏 -->
11  <button class="block md:hidden">菜单</button>
12</nav>

示例2：响应式两栏布局


1<!-- 手机：上下堆叠；≥md：左右分栏（1:2宽度） -->
2<div class="flex flex-col md:flex-row gap-4">
3  <div class="w-full md:w-1/3 bg-gray-100 p-4">侧边栏</div>
4  <div class="w-full md:w-2/3 bg-gray-200 p-4">主内容</div>
5</div>

3. 响应式网格布局（Grid → 卡片/多列布局）

卡片、商品列表、相册标配：自动适配列数，手机1列，平板2列，电脑3/4列。


1<!-- 
2  手机：1列
3  ≥sm：2列
4  ≥md：3列
5  ≥lg：4列
6-->
7<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
8  <div class="bg-white p-6 rounded shadow">卡片1</div>
9  <div class="bg-white p-6 rounded shadow">卡片2</div>
10  <div class="bg-white p-6 rounded shadow">卡片3</div>
11  <div class="bg-white p-6 rounded shadow">卡片4</div>
12</div>

4. 响应式显示/隐藏（设备专属元素）

控制元素在不同设备显示/隐藏，是导航、弹窗、菜单的核心用法：

类名	作用
`hidden md:block`	手机隐藏，≥平板显示
`block md:hidden`	手机显示，≥平板隐藏
`hidden lg:flex`	手机/平板隐藏，≥电脑显示

5. 响应式间距/尺寸

手机用小间距，大屏用大间距；手机满宽，大屏固定宽度：


1<!-- 间距：手机p-2，≥md p-6；宽度：手机满宽，≥md 半宽 -->
2<div class="w-full md:w-1/2 p-2 md:p-6 bg-blue-100">
3  响应式宽高+间距
4</div>

三、完整实战：响应式页面布局（直接复制可用）

包含头部、导航、主内容（两栏）、卡片网格、页脚，覆盖所有主流布局场景：


1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <script src="https://cdn.tailwindcss.com"></title>
7</head>
8<body class="bg-gray-50">
9  <!-- 1. 页面容器 -->
10  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
11
12    <!-- 2. 响应式导航栏 -->
13    <header class="py-4 border-b">
14      <div class="flex flex-col md:flex-row justify-between items-center">
15        <h1 class="text-xl font-bold mb-4 md:mb-0">我的网站</h1>
16        <ul class="hidden md:flex gap-6 text-gray-600">
17          <li>首页</li><li>产品</li><li>博客</li><li>联系我们</li>
18        </ul>
19        <button class="md:hidden bg-gray-200 px-3 py-1 rounded">菜单</button>
20      </div>
21    </header>
22
23    <!-- 3. 响应式两栏主内容 -->
24    <main class="py-8 flex flex-col md:flex-row gap-6">
25      <!-- 侧边栏 -->
26      <aside class="w-full md:w-1/4 bg-white p-4 rounded shadow">
27        <h3 class="font-bold mb-4">侧边栏</h3>
28        <ul class="space-y-2 text-sm text-gray-600">
29          <li>分类1</li><li>分类2</li><li>分类3</li>
30        </ul>
31      </aside>
32      <!-- 内容区 -->
33      <div class="w-full md:w-3/4">
34        <h2 class="text-lg font-bold mb-4">热门产品</h2>
35        <!-- 4. 响应式卡片网格 -->
36        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
37          <div class="bg-white p-4 rounded shadow">产品卡片1</div>
38          <div class="bg-white p-4 rounded shadow">产品卡片2</div>
39          <div class="bg-white p-4 rounded shadow">产品卡片3</div>
40        </div>
41      </div>
42    </main>
43
44    <!-- 5. 页脚 -->
45    <footer class="py-6 border-t text-center text-gray-500 text-sm">
46      © 2025 我的网站 - 响应式布局示例
47    </footer>
48  </div>
49</body>
50</html>

四、进阶：自定义断点（适配特殊需求）

如果默认断点不满足需求，可在 tailwind.config.js 自定义：


1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  theme: {
4    screens: {
5      'xs': '360px',   // 新增：超小屏手机
6      'sm': '640px',   // 默认
7      'md': '768px',
8      'lg': '1024px',
9      'xl': '1280px',
10      '2xl': '1536px',
11    }
12  }
13}

自定义后直接用：xs:text-sm（≥360px生效）。

总结

核心逻辑：移动端优先，断点前缀控制 ≥对应宽度 的样式
万能布局组合：
- 整体居中 → container mx-auto
- 导航/分栏 → flex flex-col md:flex-row
- 卡片/多列 → grid grid-cols-1 sm:grid-cols-2
- 设备显隐 → hidden md:block / block md:hidden
实战：所有布局类都能叠加断点，无需写CSS，直接复用类名即可完成响应式。

加载评论中...