核心概念（Core Concepts）
使用響應式通用類別變體來建構適應性使用者介面。
Tailwind 中的每個通用類別都可以在不同的中斷點有條件地套用，這使得在不離開 HTML 的情況下建構複雜的響應式介面變得輕而易舉。
首先，確保你已經在文件的 <head> 中加入了 viewport meta 標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />然後，要加入一個通用類別但只讓它在特定中斷點生效，你只需要在通用類別前面加上中斷點名稱，後面接著 : 字元：
<!-- 預設寬度 16，中型螢幕 32，大型螢幕 48 --><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: 來針對行動裝置
<!-- 這只會在 640px 及更寬的螢幕上置中文字，不會在小螢幕上 --><div class="sm:text-center"></div>使用沒有前綴的通用類別來針對行動裝置，並在較大的中斷點覆寫它們
<!-- 這會在行動裝置上置中文字，並在 640px 及更寬的螢幕上靠左對齊 --><div class="text-center sm:text-left"></div>因此，通常一個好主意是先實作設計的行動版佈局，然後再加入對 sm 螢幕有意義的變更，接著是 md 螢幕，以此類推。
預設情況下，像 md:flex 這樣的規則套用的樣式會在該中斷點生效，並在更大的中斷點保持套用。
如果你想讓通用類別_只_在特定中斷點範圍內生效，請將響應式變體（如 md）與 max-* 變體堆疊，將該樣式限制在特定範圍內：
<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-* 變體堆疊，來針對該中斷點的範圍：
<div class="md:max-lg:flex"> <!-- ... --></div>閱讀針對中斷點範圍了解更多。
使用 --breakpoint-* 主題變數來自訂你的中斷點：
@import "tailwindcss";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;}這會將 2xl 中斷點更新為使用 100rem 而不是預設的 96rem，並建立新的 xs 和 3xl 中斷點，可以在你的標記中使用：
<div class="grid xs:grid-cols-2 3xl:grid-cols-6"> <!-- ... --></div>請注意，始終使用相同的單位來定義中斷點很重要，否則產生的通用類別可能會以意外的順序排序，導致中斷點類別以意外的方式互相覆寫。
Tailwind 對預設中斷點使用 rem，所以如果你要在預設值之外新增額外的中斷點，請確保也使用 rem。
在主題文件中了解更多關於自訂主題的資訊。
要移除預設中斷點，請將其值重設為 initial 關鍵字：
@import "tailwindcss";@theme { --breakpoint-2xl: initial;}你也可以使用 --breakpoint-*: initial 重設所有預設中斷點，然後從頭定義所有中斷點：
@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 這樣的變體，根據容器的大小來設定子元素的樣式：
<div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>就像中斷點變體一樣，Tailwind CSS 中的容器查詢是行動優先的，會在目標容器大小及以上套用。
使用像 @max-sm 和 @max-md 這樣的變體，在特定容器大小以下套用樣式：
<div class="@container"> <div class="flex flex-row @max-md:flex-col"> <!-- ... --> </div></div>將一般的容器查詢變體與最大寬度容器查詢變體堆疊，以針對特定範圍：
<div class="@container"> <div class="flex flex-row @sm:@max-md:flex-col"> <!-- ... --> </div></div>對於使用多個巢狀容器的複雜設計，你可以使用 @container/{name} 命名容器，並使用像 @sm/{name} 和 @md/{name} 這樣的變體來針對特定容器：
<div class="@container/main"> <!-- ... --> <div class="flex flex-row @sm/main:flex-col"> <!-- ... --> </div></div>這使得可以根據遠處容器的大小來設定樣式，而不僅僅是最近的容器。
使用 --container-* 主題變數來自訂你的容器大小：
@import "tailwindcss";@theme { --container-8xl: 96rem;}這會新增一個 8xl 容器查詢變體，可以在你的標記中使用：
<div class="@container"> <div class="flex flex-col @8xl:flex-row"> <!-- ... --> </div></div>在主題文件中了解更多關於自訂主題的資訊。
對於不想加入主題的一次性容器查詢大小，使用像 @min-[475px] 和 @max-[960px] 這樣的變體：
<div class="@container"> <div class="flex flex-col @min-[475px]:flex-row"> <!-- ... --> </div></div>在其他通用類別中使用容器查詢長度單位（如 cqw）作為任意值來參照容器大小：
<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) { … } |