建立 2026-09-15 更新 2026-09-15

響應式設計

Tailwind 的斷點是 行動優先（mobile first）：沒有前綴的 class 從最小螢幕就生效；md: 表示「寬度達到 md 以上才加上」。先寫手機版，再往上加，不要先寫桌面再想辦法砍掉。

預設斷點

v4 用 rem 計算（根字級 16px 時約等於）：

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
  ...
</div>

這段的意思是：手機一欄 → 平板兩欄 → 大螢幕四欄。grid-cols-1 沒前綴，所以所有尺寸都先是一欄；較大的前綴只在夠寬時覆寫。

常見覆寫

不只欄數，字級、顯示與否、Flex 方向都可以疊前綴：

<h1 class="text-2xl font-bold md:text-4xl">標題</h1>

<nav class="hidden md:flex md:gap-6">...</nav>
<button class="md:hidden" type="button">選單</button>

hidden md:flex 表示手機隱藏、md 以上變成 flex。這是做桌面導覽＋手機漢堡列的標準寫法。

同一屬性被兩個前綴寫到時，較大的斷點勝出（在達到該寬度之後）。不要寫 md:flex sm:block 這種顛倒順序的組合，讀的人會以為 sm 比較「後面」。

相關資料

• Responsive design
• 下一分類：樣式與狀態