学习如何使用 TailwindCSS 创建适配所有设备的响应式界面。
| 断点前缀 | 最小宽度 | CSS | 设备类型 |
|---|---|---|---|
| 默认 | 0px | /* 无媒体查询 */ | 所有设备 |
| 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) | 超大屏设备 |
TailwindCSS 采用移动优先的方法。这意味着没有前缀的工具类（如 text-center）在所有屏幕尺寸上都生效，而带前缀的工具类（如 md:text-left）只在指定断点及以上生效。
以下网格在不同屏幕尺寸下显示不同的列数：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
Flexbox 方向在不同屏幕下的变化：
flex flex-col md:flex-row
某些元素只在特定屏幕尺寸下显示：
text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl
p-2 sm:p-4 md:p-6 lg:p-8
m-2 sm:m-4 md:m-6 lg:m-8
案例说明： 以下是一个完整的响应式卡片布局示例，展示了如何在不同设备上优化显示效果。
这是产品的简短描述，在不同屏幕尺寸下会有不同的显示效果。
这款产品在移动端和桌面端都有优秀的用户体验。
响应式设计让这个产品在任何设备上都能完美展示。
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
<div class="bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow">
<div class="h-32 sm:h-40 bg-gradient-to-br from-blue-400 to-blue-600 rounded-t-lg"></div>
<div class="p-4 sm:p-6">
<h4 class="text-lg sm:text-xl font-semibold mb-2">产品标题</h4>
<p class="text-sm sm:text-base mb-4">产品描述...</p>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
<span class="text-2xl font-bold mb-2 sm:mb-0">¥99</span>
<button class="px-4 py-2 rounded-lg text-sm sm:text-base">立即购买</button>
</div>
</div>
</div>
</div>先设计移动端，再逐步增强到大屏幕
确保重要内容在所有设备上都能良好显示
基础功能在所有设备上可用，高级功能逐步增强
flex-col md:flex-row
grid-cols-1 md:grid-cols-3
hidden lg:block
p-4 lg:p-8