核心概念
使用响应式工具类变体构建自适应用户界面。
Tailwind中的每个工具类都可以在不同的断点处有条件地应用，这使得构建复杂的响应式界面变得轻而易举，而且永远不需要离开您的HTML。
首先，确保您已将视口元标签添加到文档的<head>中：
<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:理解为"在小屏幕上"，而应该理解为"在小_断点处_"。
Don't use sm: to target mobile devices
<!-- This will only center text on screens 640px and wider, not on small screens --><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-*变体，因此开箱即用的可用变体有：
| Variant | Media query |
|---|---|
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) { … } |