TailwindCSS 如何实现响应式设计？

TailwindCSS 的响应式设计基于移动优先（Mobile-First）策略，通过断点前缀实现不同屏幕尺寸的样式适配。

默认断点系统

TailwindCSS 提供了五个默认断点：

javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',   // 小屏幕设备
      'md': '768px',   // 平板设备
      'lg': '1024px',  // 笔记本电脑
      'xl': '1280px',  // 大屏幕设备
      '2xl': '1536px', // 超大屏幕设备
    },
  },
}

使用方式

1. 基础响应式类

html
<!-- 默认样式（移动端） -->
<div class="w-full md:w-1/2 lg:w-1/3">
  内容区域
</div>

2. 响应式显示隐藏

html
<!-- 移动端显示，桌面端隐藏 -->
<div class="block md:hidden">
  移动端菜单
</div>

<!-- 移动端隐藏，桌面端显示 -->
<div class="hidden md:block">
  桌面端导航
</div>

3. 响应式布局

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

自定义断点

可以在 tailwind.config.js 中自定义断点：

javascript
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',
        '3xl': '1600px',
        // 使用 min-width 范围
        'tablet': {'min': '640px', 'max': '1023px'},
      },
    },
  },
}

响应式修饰符

TailwindCSS 支持在任意工具类前添加响应式前缀：

html
<!-- 文字大小响应式 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  响应式标题
</h1>

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

<!-- Flex 布局响应式 -->
<div class="flex flex-col md:flex-row">
  <div>左侧</div>
  <div>右侧</div>
</div>

最佳实践

1. 移动优先设计：先编写移动端样式，然后逐步添加断点
2. 合理使用断点：避免过度细分断点，保持代码简洁
3. 测试多设备：确保在不同屏幕尺寸下都有良好的显示效果
4. 性能优化：使用 @media 查询合并相似断点的样式