「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

響應式設計 (RWD)

使用響應式功能變數來建立自適應的使用者介面。

Overview

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

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

斷點前綴詞寬度最小值CSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

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

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

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

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

Man looking at item at a store
案例分析
為您新的生意找到消費者

展開新生意是一項艱鉅的工作。五個點子讓您找到第一位消費者。

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">案例分析</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">為您新的生意找到消費者</a>
      <p class="mt-2 text-gray-500">展開新生意是一項艱鉅的工作。五個點子讓您找到第一位消費者。</p>
    </div>
  </div>
</div>

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

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

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


行動裝置優先

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

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

行動裝置導向

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

不需要針對行動裝置使用 sm:

<!-- 文字置中僅會作用在大於等於 640px 的螢幕上,而不是小螢幕 -->
<div class="sm:text-center"></div>

針對行動裝置使用沒有前綴詞的功能,並在較大的斷點覆蓋它們

<!-- 文字置中將會在手機上生效,而當螢幕大於等於 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>

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


客製化斷點

在你的 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) { ... }
    },
  }
}

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