Tailwind CSS 响应式设计 #

<!-- 移动优先：默认小屏样式，逐步添加大屏样式 -->
<div class="text-sm md:text-base lg:text-lg">
  响应式文字
</div>

<!-- 默认 1 列，sm 及以上 2 列，md 及以上 3 列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 仅在 sm 到 md 之间显示 -->
<div class="sm:block md:hidden">
  仅在 sm 断点显示
</div>

<!-- 仅在 md 到 lg 之间显示 -->
<div class="md:block lg:hidden">
  仅在 md 断点显示
</div>

<!-- 响应式显示/隐藏 -->
<div class="hidden md:block">桌面端显示</div>
<div class="block md:hidden">移动端显示</div>

<!-- 响应式 Flex 方向 -->
<div class="flex flex-col md:flex-row">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 响应式 Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>项目</div>
</div>

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

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

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

<!-- 响应式文本对齐 -->
<p class="text-center md:text-left">
  响应式对齐
</p>

<!-- 响应式宽度 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

<!-- 响应式最大宽度 -->
<div class="max-w-sm md:max-w-md lg:max-w-lg">
  响应式最大宽度
</div>

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

<div class="xs:text-sm">
  自定义断点
</div>

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
  },
  plugins: [
    function({ matchUtilities, theme }) {
      matchUtilities(
        {
          'max': (value) => ({
            [`@media (max-width: ${value})`]: {},
          }),
        },
        { values: theme('screens') }
      )
    },
  ],
}

<!-- 最大宽度断点 -->
<div class="max-md:text-center">
  仅在 md 以下居中
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        'xs': '320px',
        'sm': '384px',
        'md': '448px',
        'lg': '512px',
        'xl': '576px',
      },
    },
  },
}

<!-- 定义容器 -->
<div class="@container">
  <!-- 基于容器宽度的响应式 -->
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    容器查询布局
  </div>
</div>

<nav class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <span class="font-bold text-xl">Logo</span>
      </div>
      
      <!-- 桌面端菜单 -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="hover:text-blue-500">首页</a>
        <a href="#" class="hover:text-blue-500">关于</a>
        <a href="#" class="hover:text-blue-500">服务</a>
        <a href="#" class="hover:text-blue-500">联系</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden pb-4">
      <a href="#" class="block py-2 hover:text-blue-500">首页</a>
      <a href="#" class="block py-2 hover:text-blue-500">关于</a>
      <a href="#" class="block py-2 hover:text-blue-500">服务</a>
      <a href="#" class="block py-2 hover:text-blue-500">联系</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 p-6">
    <h3 class="font-semibold">卡片标题</h3>
    <p class="text-gray-600 mt-2">卡片内容</p>
  </div>
  <!-- 更多卡片... -->
</div>

<div class="flex flex-col lg:flex-row min-h-screen">
  <!-- 侧边栏 -->
  <aside class="w-full lg:w-64 bg-gray-100 p-4 lg:min-h-screen">
    侧边栏内容
  </aside>
  
  <!-- 主内容 -->
  <main class="flex-1 p-4">
    主内容区域
  </main>
</div>

<img class="w-full md:w-1/2 lg:w-1/3 mx-auto" src="image.jpg" alt="响应式图片">

<form class="space-y-4">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block mb-1">名字</label>
      <input class="w-full border rounded px-4 py-2">
    </div>
    <div>
      <label class="block mb-1">姓氏</label>
      <input class="w-full border rounded px-4 py-2">
    </div>
  </div>
  <div>
    <label class="block mb-1">邮箱</label>
    <input type="email" class="w-full border rounded px-4 py-2">
  </div>
</form>

<footer class="bg-gray-100 py-8">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div>
        <h4 class="font-semibold mb-4">关于我们</h4>
        <p class="text-gray-600">公司介绍内容</p>
      </div>
      <div>
        <h4 class="font-semibold mb-4">产品服务</h4>
        <ul class="space-y-2 text-gray-600">
          <li><a href="#">产品 1</a></li>
          <li><a href="#">产品 2</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-4">联系我们</h4>
        <ul class="space-y-2 text-gray-600">
          <li>电话：123-456-7890</li>
          <li>邮箱：info@example.com</li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-4">关注我们</h4>
        <div class="flex space-x-4">
          <a href="#">微信</a>
          <a href="#">微博</a>
        </div>
      </div>
    </div>
  </div>
</footer>