響應式設計

概述

Tailwind 中的每個實用類別都可以在不同的斷點有條件地應用，這使得建構複雜的響應式介面變得輕而易舉，而無需離開 HTML。

首先，請確保您已將viewport meta 標籤新增至文件的 <head> 中

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

然後，要新增一個實用程式但僅在特定斷點生效，您需要做的就是以斷點名稱作為實用程式的前綴，然後是 : 字元

HTML

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --><img class="w-16 md:w-32 lg:w-48" src="..." />

預設有五個斷點，靈感來自常見的裝置解析度

斷點前綴	最小寬度	CSS
`sm`	40rem (640px)	`@media (width >= 40rem) { ... }`
`md`	48rem (768px)	`@media (width >= 48rem) { ... }`
`lg`	64rem (1024px)	`@media (width >= 64rem) { ... }`
`xl`	80rem (1280px)	`@media (width >= 80rem) { ... }`
`2xl`	96rem (1536px)	`@media (width >= 96rem) { ... }`

這適用於框架中的每個實用類別，這意味著您可以在給定的斷點更改任何內容，甚至是字母間距或游標樣式之類的東西。

這是一個簡單的範例，說明行銷頁面元件如何在小型螢幕上使用堆疊式版面配置，而在較大的螢幕上使用並排式版面配置

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">  <div class="md:flex">    <div class="md:shrink-0">      <img        class="h-48 w-full object-cover md:h-full md:w-48"        src="/img/building.jpg"        alt="Modern building architecture"      />    </div>    <div class="p-8">      <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div>      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">        Incredible accommodation for your team      </a>      <p class="mt-2 text-gray-500">        Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of        places to do just that.      </p>    </div>  </div></div>

以下是上述範例的運作方式

預設情況下，外部 div 是 display: block，但透過新增 md:flex 實用程式，它會在媒體螢幕和更大的螢幕上變成 display: flex。
當父元素是彈性容器時，我們要確保影像永遠不會縮小，因此我們新增了 md:shrink-0 以防止在媒體螢幕和更大的螢幕上縮小。從技術上講，我們可以直接使用 shrink-0，因為它在較小的螢幕上不會執行任何操作，但由於它僅在 md 螢幕上才有意義，因此最好在類別名稱中明確說明。
在小型螢幕上，影像預設會自動全寬。在媒體螢幕及更大的螢幕上，我們將寬度限制為固定大小，並使用 md:h-full md:w-48 確保影像全高。

我們在此範例中僅使用了一個斷點，但您也可以使用 sm、lg、xl 或 2xl 響應式前綴輕鬆地在其他大小自訂此元件。

行動優先

Tailwind 使用行動優先斷點系統，類似於您可能在其他框架（例如 Bootstrap）中習慣使用的系統。

這意味著未加前綴的實用程式（例如 uppercase）會在所有螢幕大小上生效，而加前綴的實用程式（例如 md:uppercase）僅在指定的斷點及以上生效。

鎖定行動螢幕

這個方法最常讓人感到驚訝的地方在於，要為行動裝置設定樣式，您需要使用不帶前綴的版本，而不是帶有 sm: 前綴的版本。不要將 sm: 視為「在小螢幕上」，而是將其視為「在小的斷點」。

不要使用 sm: 來鎖定行動裝置

HTML

<!-- This will only center text on screens 640px and wider, not on small screens --><div class="sm:text-center"></div>

使用不帶前綴的實用工具來鎖定行動裝置，並在較大的斷點覆蓋它們

HTML

<!-- This will center text on mobile, and left align it on screens 640px and wider --><div class="text-center sm:text-left"></div>

因此，通常最好先實作設計的行動裝置版面配置，然後再疊加任何適用於 sm 螢幕的變更，接著是 md 螢幕等等。

鎖定斷點範圍

預設情況下，由 md:flex 之類的規則套用的樣式將在該斷點套用，並在較大的斷點保持套用。

如果您希望僅在特定斷點範圍處於活動狀態時才套用實用工具，請將 md 之類的回應式變體與 max-* 變體堆疊在一起，以將該樣式限制在特定範圍內

HTML

<div class="md:max-xl:flex">  <!-- ... --></div>

Tailwind 為每個斷點產生相應的 max-* 變體，因此開箱即用可使用以下變體

變體	媒體查詢
`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) { ... }`

鎖定單個斷點

若要鎖定單個斷點，請將該斷點的範圍設定為目標，方法是將 md 之類的回應式變體與下一個斷點的 max-* 變體堆疊在一起

HTML

<div class="md:max-lg:flex">  <!-- ... --></div>

閱讀鎖定斷點範圍以了解更多資訊。

使用自訂斷點

自訂您的主題

使用 --breakpoint-* 主題變數來自訂您的斷點

app.css

@import "tailwindcss";@theme {  --breakpoint-xs: 30rem;  --breakpoint-2xl: 100rem;  --breakpoint-3xl: 120rem;}

這會將 2xl 斷點更新為使用 100rem 而不是預設的 96rem，並建立可在您的標記中使用的新 xs 和 3xl 斷點

HTML

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">  <!-- ... --></div>

在主題文件中了解更多關於自訂主題的資訊。

移除預設斷點

若要移除預設斷點，請將其值重設為 initial 關鍵字

app.css

@import "tailwindcss";@theme {  --breakpoint-2xl: initial;}

您也可以使用 --breakpoint-*: initial 重設所有預設斷點，然後從頭定義所有斷點

app.css

@import "tailwindcss";@theme {  --breakpoint-*: initial;  --breakpoint-tablet: 40rem;  --breakpoint-laptop: 64rem;  --breakpoint-desktop: 80rem;}

在主題文件中了解更多關於移除預設主題值的資訊。

使用任意值

如果您需要使用不適合包含在主題中的一次性斷點，請使用 min 或 max 變體來動態產生自訂斷點，並使用任何任意值。

<div class="max-[600px]:bg-sky-300 min-[320px]:text-center">  <!-- ... --></div>

在任意值文件中了解更多關於任意值支援的資訊。

容器查詢

什麼是容器查詢？

容器查詢是一種現代 CSS 功能，可讓您根據父元素的大小而不是整個視窗的大小來設定樣式。它們讓您建立更具可移植性和可重複使用性的元件，因為它們可以根據該元件可用的實際空間而變更。

基本範例

使用 @container 類別將元素標記為容器，然後使用 @sm 和 @md 等變體，根據容器的大小設定子元素的樣式

HTML

<div class="@container">  <div class="flex flex-col @md:flex-row">    <!-- ... -->  </div></div>

與斷點變體一樣，容器查詢在 Tailwind CSS 中是行動裝置優先的，並在目標容器大小及以上套用。

最大寬度容器查詢

使用 @max-sm 和 @max-md 等變體，在特定容器大小以下套用樣式

HTML

<div class="@container">  <div class="flex flex-row @max-md:flex-col">    <!-- ... -->  </div></div>

容器查詢範圍

將常規容器查詢變體與最大寬度容器查詢變體堆疊在一起，以鎖定特定範圍

HTML

<div class="@container">  <div class="flex flex-row @sm:@max-md:flex-col">    <!-- ... -->  </div></div>

具名容器

對於使用多個巢狀容器的複雜設計，您可以使用 @container/{name} 來命名容器，並使用 @sm/{name} 和 @md/{name} 等變體來鎖定特定容器

HTML

<div class="@container/main">  <!-- ... -->  <div class="flex flex-row @sm/main:flex-col">    <!-- ... -->  </div></div>

這使得可以根據遠端容器的大小，而不僅僅是最近的容器來設定樣式。

使用自訂容器大小

使用 --container-* 主題變數來自訂您的容器大小

app.css

@import "tailwindcss";@theme {  --container-8xl: 96rem;}

這會新增一個新的 8xl 容器查詢變體，可在您的標記中使用

HTML

<div class="@container">  <div class="flex flex-col @8xl:flex-row">    <!-- ... -->  </div></div>

在主題文件中了解更多關於自訂主題的資訊。

使用任意值

對於您不想新增到主題中的一次性容器查詢大小，請使用 @min-[475px] 和 @max-[960px] 等變體

HTML

<div class="@container">  <div class="flex flex-col @min-[475px]:flex-row">    <!-- ... -->  </div></div>

使用容器查詢單位

在其他實用類別中，使用容器查詢長度單位（例如 cqw）作為任意值，以參考容器大小

HTML

<div class="@container">  <div class="w-[50cqw]">    <!-- ... -->  </div></div>

容器大小參考

預設情況下，Tailwind 包含範圍從 16rem (256px) 到 80rem (1280px) 的容器大小

變體	最小寬度	CSS
`@3xs`	16rem (256px)	`@container (width >= 16rem) { … }`
`@2xs`	18rem (288px)	`@container (width >= 18rem) { … }`
`@xs`	20rem (320px)	`@container (width >= 20rem) { … }`
`@sm`	24rem (384px)	`@container (width >= 24rem) { … }`
`@md`	28rem (448px)	`@container (width >= 28rem) { … }`
`@lg`	32rem (512px)	`@container (width >= 32rem) { … }`
`@xl`	36rem (576px)	`@container (width >= 36rem) { … }`
`@2xl`	42rem (672px)	`@container (width >= 42rem) { … }`
`@3xl`	48rem (768px)	`@container (width >= 48rem) { … }`
`@4xl`	56rem (896px)	`@container (width >= 56rem) { … }`
`@5xl`	64rem (1024px)	`@container (width >= 64rem) { … }`
`@6xl`	72rem (1152px)	`@container (width >= 72rem) { … }`
`@7xl`	80rem (1280px)	`@container (width >= 80rem) { … }`

本頁內容