響應式設計 (RWD)

Overview

在 Tailwind 上的每一個功能 class 可以有條件地應用於不同的斷點(breakpoints)，這讓你可以輕鬆地建立複雜的響應式介面而不需要離開 HTML。

根據常見的裝置解析度，預設值設有五個斷點。

欲增加一個功能但僅生效在某個特定斷點上，你只需要加入該斷點的前綴詞，並在後面加上 : 即可。

<!-- 寬度預設值設為 16, 中等螢幕設為 32, 大螢幕設為 48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

這適用於框架中的任何一個功能 class，代表你可以給定斷點來改變任何東西，甚至是字元間距或滑鼠游標的樣式。

接下來是一個簡單的行銷頁面元件的範例，該範例在小螢幕上使用堆疊的排版，大螢幕上使用並排的排版 (調整你的瀏覽器大小來檢視它的行為)

接下來說明上面範例的運作方式：

• 在預設情況下，外側的 div 是 display: block，但是加上了 md:flex 的功能之後，大於中等螢幕時將會變成 display: flex。
• 當父元素是一個 flex 容器時，為了確保圖片絕不被縮小，我們加上 md:flex-shrink-0 來避免其在中等螢幕或以上時被縮小。精確來說，因為在小螢幕上並不會有任何作用，其實我們可以只使用 flex-shrink-0 即可，但是由於我們只關注在 md 螢幕上的作用，所以清楚地表現在 class 名稱上會是比較好的。
• 在小螢幕上的圖片預設將會自動的滿版呈現，而在中型或以上的螢幕時，我們使用了 md:h-full md:w-48 來限制寬度與滿版的高度以固定圖片尺寸。

在這個範例裡面我們僅使用一個斷點，但是你也可以使用其他 sm、lg、xl 或 `2xl 等響應式前綴來簡單的客製化這個元件。

行動裝置優先

在預設情況下，Tailwind 使用了行動裝置優先的斷點系統，如同其它你可能已經熟悉的框架，例如 Bootstrap。

表示沒有前綴詞的功能（例如：uppercase）會作用在全部的螢幕上，而有前綴詞的功能（例如：md:uppercase）只會在指定的斷點及其之上的螢幕生效。

行動裝置導向

這種方式最讓人驚豔的是針對手機的樣式設計，你需要使用沒有前綴詞的功能，而不是 sm: 的前綴詞。不要將 sm: 視為 「小螢幕上」，而應該將其視為「小螢幕斷點處」

<!-- 文字置中將會在手機上生效，而當螢幕大於等於 640px 時，將會靠左對齊 -->
<div class="text-center sm:text-left"></div>

因此，通常最好優先設計手機的排版，接著在 sm 上修改，然後是 md ，以此類推。

單一斷點導向

Tailwind 的斷點僅包含 min-width 而沒有 max-width，這代表任何功能你新增在較小斷點上，將會同時生效在比其還大的所有斷點。

如果你只想在某個斷點上應用某項功能，只需要在更大的斷點上新增另一個的功能，藉此來抵銷前一項功能的效果。

Here is an example where the background color is red at the md breakpoint, but green at every other breakpoint:

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

請注意，不必在 sm 或 xl 的斷點上指定背景顏色，你只需要指定一個功能何時開始生效，而不是何時結束。

客製化斷點

在你的 tailwind.config.js 檔案中，可以完全地客製化斷點。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

在 客製化斷點文件 中了解更多。