本文內容：
Tailwindcss V4中如何使用響應式設計功能，包括默認斷點、自定義斷點、斷點范圍控制以及容器查詢的各種技巧，幫助你在不離開 HTML 的前提下優雅構建響應式頁面。
🌟 默認斷點用法（移動優先）
Tailwind 默認斷點如下：
| 前綴 | 最小寬度(min-width) | 示例用途 |
|---|---|---|
sm | 640px | 手機橫屏、小平板 |
md | 768px | 平板 |
lg | 1024px | 小型筆記本 |
xl | 1280px | 大型桌面顯示器 |
2xl | 1536px | 超大屏顯示器 |
- ? 示例：基礎布局響應式調整
<!-- 小屏堆疊，大屏并排 -->
<div class="flex flex-col md:flex-row gap-4"><div class="bg-blue-100 p-4 flex-1">左側內容</div><div class="bg-green-100 p-4 flex-1">右側內容</div>
</div>
📀 移動優先系統
無前綴類默認作用于所有設備，帶前綴的類則僅在特定斷點及以上生效。
- ? 示例：標題字體大小逐級遞增
<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold">響應式標題
</h1>
移動優先：不要使用
sm來定義移動設備，移動設備應該是由無前綴的css來定義
🌠 斷點范圍 + 單一斷點控制
使用組合變體如 `md:max-xl` 限制樣式僅在特定范圍內生效。
- ? 示例：僅在中級屏幕范圍顯示邊框
<div class="border-0 md:border md:max-xl:border-2">屏幕寬度在 768px 到 1279px 時顯示邊框
</div>
| 變體 | 媒體大小 |
|---|---|
| max-sm | @media (width < 40rem) { … } |
| max-md | @media (width < 48rem) { … } |
| max-lg | @media (width < 64rem) { … } |
| max-xl | @media (width < 80rem) { … } |
| max-2xl | @media (width < 96rem) { … } |
?? 自定義斷點 + 任意斷點值 + 刪除斷點
Tailwind 允許你擴展或覆蓋默認斷點。
- ? 示例：自定義斷點（在
index.css中）
@import "tailwindcss";
@theme {--breakpoint-xs: 30rem;--breakpoint-2xl: 100rem;--breakpoint-3xl: 120rem;
}
<div class="xs:text-sm sm:text-base md:text-lg">自定義 xs 斷點
</div>
- ? 示例：任意斷點
<div class="[min-width:900px]:text-red-500">僅寬度大于 900px 時變紅
</div>
- ? 示例：刪除默認斷點 + 設置新斷點
@import "tailwindcss";
@theme {--breakpoint-md: initial; /* 刪除某一斷點 */--breakpoint-*: initial; /* 刪除所有斷點 */--breakpoint-tablet: 40rem;--breakpoint-laptop: 64rem;--breakpoint-desktop: 80rem;
}
<div class="tablet:text-sm laptop:text-base desktop:text-lg">自定義新斷點
</div>
🧰 容器查詢
容器查詢使你根據「父元素的尺寸」來設置樣式，更適合組件化。
- ? 基礎用法
<div class="container mx-auto @container"><div class="@sm:text-lg text-base">根據父容器大小變化文字大小</div>
</div>
- ? 示例：最大容器寬度限制
<div class="@container max-w-4xl mx-auto"><div class="@lg:grid @lg:grid-cols-2 gap-4"><div class="bg-gray-200 p-4">內容塊 A</div><div class="bg-gray-300 p-4">內容塊 B</div></div>
</div>
- ? 命名容器 + 多容器樣式
<div class="container mx-auto @container/foo"><div class="@foo/md:bg-red-200">僅當命名容器 foo 達到 md 時改變背景</div>
</div>
當然還有
- 容器查詢的自定義
- 容器查詢斷點的刪除
- 默認容器查詢斷點列表
官方v4文檔
📌 總結（一句話記住）
Tailwind 的響應式系統就是：
- 📱 移動優先：基礎類先布局移動設備
- 🧱 斷點可控：任意組合斷點，靈活極致
- 📦 容器查詢：真正模塊化組件利器
下一章我將帶你了解tailiwindcss的主題功能。感興趣的朋友可以訂閱我的專欄。讓哦我們一起起飛吧！🚀
