TailwindCSS响应式设计Skill tailwind-responsive-design

---

名称: tailwind-responsive-design 用户可调用: false 描述: 用于使用Tailwind CSS构建响应式布局和移动优先设计。涵盖断点、容器查询和响应式工具。 允许工具:

• 读取
• 写入
• 编辑
• Bash
• Grep
• Glob

---

Tailwind CSS - 响应式设计

Tailwind CSS提供了一种移动优先的响应式设计系统，使用断点前缀，便于构建自适应布局。

关键概念

移动优先方法

Tailwind使用移动优先的断点系统。无前缀的工具类适用于所有屏幕尺寸，而断点前缀从该断点开始向上应用：

<!-- 移动端：全宽度，平板+：半宽度，桌面+：三分之一宽度 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

默认断点

// tailwind.config.js 默认断点
{
  sm: '640px',   // 小设备（横向手机）
  md: '768px',   // 中设备（平板）
  lg: '1024px',  // 大设备（桌面）
  xl: '1280px',  // 超大设备（大桌面）
  '2xl': '1536px' // 2X大设备（更大桌面）
}

最佳实践

1. 从移动端开始，向上扩展

先为移动端设计，然后为更大屏幕添加复杂性：

<!-- 好：移动优先方法 -->
<div class="
  flex flex-col
  md:flex-row
  gap-4
">
  <div class="w-full md:w-1/2">列 1</div>
  <div class="w-full md:w-1/2">列 2</div>
</div>

<!-- 坏：桌面优先（需要更多覆盖） -->
<div class="
  flex flex-row
  sm:flex-col
">

2. 使用响应式排版

在不同设备上适当缩放文本：

<h1 class="
  text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl
  font-bold
  leading-tight
">
  响应式标题
</h1>

<p class="
  text-sm sm:text-base md:text-lg
  leading-relaxed
">
  可缩放的正文文本
</p>

3. 响应式间距

为不同屏幕调整内边距和外边距：

<div class="
  px-4 sm:px-6 md:px-8 lg:px-12
  py-8 md:py-12 lg:py-16
">
  <!-- 带响应式内边距的内容 -->
</div>

<section class="
  space-y-4 md:space-y-6 lg:space-y-8
">
  <!-- 子元素之间的响应式间距 -->
</section>

4. 网格布局

创建适应屏幕尺寸的响应式网格：

<!-- 1列移动端，2列平板，3列桌面，4列大桌面 -->
<div class="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 md:gap-6
">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
</div>

5. 显示/隐藏元素

跨断点控制可见性：

<!-- 移动菜单按钮：移动端可见，桌面隐藏 -->
<button class="md:hidden">
  <svg><!-- 菜单图标 --></svg>
</button>

<!-- 桌面导航：移动端隐藏，桌面可见 -->
<nav class="hidden md:flex space-x-6">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<!-- 仅在移动端显示 -->
<div class="block md:hidden">仅移动端</div>

<!-- 仅在桌面显示 -->
<div class="hidden lg:block">仅桌面</div>

示例

响应式英雄区域

<section class="
  relative
  min-h-screen md:min-h-[600px] lg:min-h-[800px]
  px-4 sm:px-6 lg:px-8
  py-12 md:py-16 lg:py-20
">
  <div class="
    max-w-7xl mx-auto
    flex flex-col md:flex-row
    items-center
    gap-8 md:gap-12
  ">
    <!-- 文本内容 -->
    <div class="
      w-full md:w-1/2
      text-center md:text-left
    ">
      <h1 class="
        text-3xl sm:text-4xl md:text-5xl lg:text-6xl
        font-bold
        mb-4 md:mb-6
      ">
        欢迎访问我们的网站
      </h1>
      <p class="
        text-base sm:text-lg md:text-xl
        text-gray-600
        mb-6 md:mb-8
      ">
        这是一个适应所有屏幕尺寸的响应式英雄区域。
      </p>
      <button class="
        w-full sm:w-auto
        px-6 md:px-8
        py-3 md:py-4
        bg-blue-500 hover:bg-blue-600
        text-white
        text-base md:text-lg
        rounded-lg
      ">
        开始使用
      </button>
    </div>

    <!-- 图片 -->
    <div class="
      w-full md:w-1/2
      order-first md:order-last
    ">
      <img
        src="/hero.jpg"
        alt="英雄"
        class="
          w-full
          rounded-lg md:rounded-xl
          shadow-lg md:shadow-2xl
        "
      />
    </div>
  </div>
</section>

响应式卡片网格

<div class="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 sm:gap-6 lg:gap-8
  px-4 sm:px-6 lg:px-8
">
  {cards.map(card => (
    <div class="
      bg-white
      rounded-lg md:rounded-xl
      shadow-md hover:shadow-xl
      overflow-hidden
      transition-shadow
    ">
      <img
        src={card.image}
        alt={card.title}
        class="
          w-full
          h-48 sm:h-56 lg:h-64
          object-cover
        "
      />
      <div class="
        p-4 sm:p-5 lg:p-6
      ">
        <h3 class="
          text-lg sm:text-xl
          font-semibold
          mb-2
        ">
          {card.title}
        </h3>
        <p class="
          text-sm sm:text-base
          text-gray-600
          line-clamp-3
        ">
          {card.description}
        </p>
      </div>
    </div>
  ))}
</div>

响应式导航

<nav class="
  bg-white
  border-b border-gray-200
  sticky top-0 z-50
">
  <div class="
    max-w-7xl mx-auto
    px-4 sm:px-6 lg:px-8
  ">
    <div class="
      flex justify-between items-center
      h-16 md:h-20
    ">
      <!-- 徽标 -->
      <div class="flex-shrink-0">
        <img
          src="/logo.svg"
          alt="徽标"
          class="h-8 md:h-10 w-auto"
        />
      </div>

      <!-- 桌面导航 -->
      <div class="
        hidden md:flex
        space-x-8
      ">
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          首页
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          关于
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          服务
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          联系
        </a>
      </div>

      <!-- 移动菜单按钮 -->
      <button class="
        md:hidden
        p-2
        rounded-md
        text-gray-700 hover:bg-gray-100
      ">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- 移动菜单 -->
  <div class="md:hidden border-t border-gray-200">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        首页
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        关于
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        服务
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        联系
      </a>
    </div>
  </div>
</nav>

高级模式

容器查询（现代）

使用容器查询进行组件级响应式设计：

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

<div class="@container">
  <div class="
    @sm:grid @sm:grid-cols-2
    @lg:grid-cols-3
    gap-4
  ">
    <!-- 响应容器，非视口 -->
  </div>
</div>

自定义断点

添加项目特定断点：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
      // 最大宽度断点
      'max-md': { 'max': '767px' },
      // 高度断点
      'tall': { 'raw': '(min-height: 800px)' },
    },
  },
}

基于方向的样式

<div class="
  portrait:flex-col
  landscape:flex-row
">
  适应方向的内容
</div>

打印样式

<div class="
  text-base
  print:text-xs
  print:hidden
">
  打印时隐藏
</div>

<div class="hidden print:block">
  仅打印时显示
</div>

常见模式

响应式图片尺寸

<img
  src="/image.jpg"
  alt="响应式图片"
  class="
    w-full
    h-auto
    max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
    mx-auto
  "
/>

<!-- 带纵横比 -->
<div class="
  aspect-square sm:aspect-video
  w-full
  overflow-hidden
">
  <img
    src="/image.jpg"
    class="w-full h-full object-cover"
  />
</div>

响应式Flexbox方向

<div class="
  flex
  flex-col sm:flex-row
  gap-4
  items-center sm:items-start
  justify-center sm:justify-between
">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

响应式顺序

<div class="flex flex-col md:flex-row">
  <div class="order-2 md:order-1">桌面第一，移动第二</div>
  <div class="order-1 md:order-2">桌面第二，移动第一</div>
</div>

反模式

❌ 不要使用太多断点

<!-- 坏：过多断点 -->
<div class="
  text-xs
  sm:text-sm
  md:text-base
  lg:text-lg
  xl:text-xl
  2xl:text-2xl
">

<!-- 好：策略性断点 -->
<div class="
  text-sm
  md:text-base
  lg:text-lg
">

❌ 不要忘记移动用户

<!-- 坏：仅桌面思维 -->
<div class="grid grid-cols-4 gap-2">

<!-- 好：移动优先 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

❌ 不要到处使用任意断点

<!-- 坏：太多自定义断点 -->
<div class="min-[823px]:flex min-[1043px]:grid">

<!-- 好：使用标准断点 -->
<div class="md:flex lg:grid">

相关技能

• tailwind-utility-classes：有效使用Tailwind的工具类
• tailwind-components：构建可重用组件模式
• tailwind-performance：优化响应式设计的性能