响应式设计

概述

Tailwind 中的每个工具类都可以在不同的断点上有条件地应用，这使得构建复杂的响应式界面轻而易举，而无需离开 HTML。

首先，请确保您已将 viewport 元标签添加到文档的 <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) { ... }`

这适用于框架中的 每个工具类，这意味着您可以在给定断点下根本改变任何东西——即使是字母间距或光标样式等。

这是一个简单的营销页面组件示例，它在小屏幕上使用堆叠布局，而在大屏幕上使用并排布局：

<!-- [!代码 word:md\:max-w-2xl] --><div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">  <!-- [!代码 word:md\:flex] -->  <div class="md:flex">    <!-- [!代码 word:md\:shrink-0] -->    <div class="md:shrink-0">      <!-- [!代码 word:md\:h-full] -->      <!-- [!代码 word:md\:w-48] -->      <img        class="h-48 w-full object-cover md:h-full md:w-48"        src="/img/building.jpg"        alt="现代建筑设计"      />    </div>    <div class="p-8">      <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">公司团建</div>      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">        为您的团队提供令人难以置信的住宿      </a>      <p class="mt-2 text-gray-500">        想带您的团队去度假，享受美食并沐浴阳光吗？我们有一份地方的清单可以提供。      </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]  --><!-- 这将在 640px 及更宽的屏幕上只居中文本，而不是在小屏幕上 --><div class="sm:text-center"></div>

使用未加前缀的工具类来定位移动设备，并在更大的断点上覆盖它们

<!-- [!代码文件名:HTML]  --><!-- 这将在移动设备上居中文本，在 640px 并更宽的屏幕上左对齐 --><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 {  /* [!代码高亮:4] */  --breakpoint-xs: 30rem;  --breakpoint-2xl: 100rem;  --breakpoint-3xl: 120rem;}

这将 2xl 断点更新为使用 100rem，而不是默认的 96rem，并创建新的 xs 和 3xl 断点，可以在标记中使用：

<!-- [!代码文件名:HTML]  --><!-- [!代码 word:xs\:grid-cols-2] --><!-- [!代码 word:3xl\:grid-cols-6] --><div class="grid xs:grid-cols-2 3xl:grid-cols-6">  <!-- ... --></div>

请注意，始终使用相同的单位定义您的断点很重要，否则生成的工具可能会以意想不到的顺序进行排序，导致断点类以意想不到的方式相互覆盖。

Tailwind 为默认断点使用 rem，因此如果您要在默认值中添加其他断点，请确保也使用 rem。

有关自定义主题的更多信息，请参阅主题文档。

移除默认断点

要移除默认断点，请将其值重置为 initial 关键字：

/* [!代码文件名:app.css] */@import "tailwindcss";@theme {  /* [!代码高亮:2] */  --breakpoint-2xl: initial;}

您还可以使用 --breakpoint-*: initial 重置所有默认断点，然后从头开始定义所有断点：

/* [!代码文件名:app.css] */@import "tailwindcss";@theme {  /* [!代码高亮:5] */  --breakpoint-*: initial;  --breakpoint-tablet: 40rem;  --breakpoint-laptop: 64rem;  --breakpoint-desktop: 80rem;}

有关删除默认主题值的更多信息，请参阅主题文档。

使用任意值

如果您需要使用一个不适合放入主题的临时断点，请使用 min 或 max 变体，根据任意值动态生成自定义断点。

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

有关任意值支持的更多信息，请参阅任意值文档。

容器查询

什么是容器查询？

容器查询是一种现代 CSS 特性，允许您根据父元素的大小来为某个元素设置样式，而不是根据整个视口的大小。它们使您能够构建更具可移植性和可重用性的组件，因为它们可以根据该组件实际可用的空间进行更改。

基本示例

使用 @container 类将元素标记为容器，然后使用像 @sm 和 @md 这样的变体，根据容器的大小为子元素设置样式：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@container] --><!-- [!代码 word:@md\:flex-row] --><div class="@container">  <div class="flex flex-col @md:flex-row">    <!-- ... -->  </div></div>

与断点变体一样，容器查询在 Tailwind CSS 中是移动优先的，并在目标容器大小及以上应用。

最大宽度容器查询

使用 @max-sm 和 @max-md 之类的变体在特定容器大小以下应用样式：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@max-md\:flex-col] --><div class="@container">  <div class="flex flex-row @max-md:flex-col">    <!-- ... -->  </div></div>

容器查询范围

将常规容器查询变体与最大宽度容器查询变体堆叠，以目标特定范围：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@sm\:@max-md\:flex-col] --><div class="@container">  <div class="flex flex-row @sm:@max-md:flex-col">    <!-- ... -->  </div></div>

命名容器

对于使用多个嵌套容器的复杂设计，您可以使用 @container/{name} 命名容器，并使用像 @sm/{name} 和 @md/{name} 这样的变体来定位特定的容器：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@container/main] --><!-- [!代码 word:@sm/main\:flex-col] --><div class="@container/main">  <!-- ... -->  <div class="flex flex-row @sm/main:flex-col">    <!-- ... -->  </div></div>

这使得根据较远容器的大小来为某个元素设置样式成为可能，而不仅仅是最近的容器。

使用自定义容器大小

使用 --container-* 主题变量来定制您的容器大小：

/* [!代码文件名:app.css] */@import "tailwindcss";@theme {  /* [!代码高亮:2] */  --container-8xl: 96rem;}

这将添加一个新的 8xl 容器查询变体，可以在标记中使用：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@8xl\:flex-row] --><div class="@container">  <div class="flex flex-col @8xl:flex-row">    <!-- ... -->  </div></div>

有关自定义主题的更多信息，请参阅主题文档。

使用任意值

使用 @min-[475px] 和 @max-[960px] 等变体快速实现您不想添加到主题中的一次性容器查询大小：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:@min-\[475px\]\:flex-row] --><div class="@container">  <div class="flex flex-col @min-[475px]:flex-row">    <!-- ... -->  </div></div>

使用容器查询单位

使用容器查询长度单位作为其他工具类中的任意值，以引用容器大小：

<!-- [!代码文件名:HTML] --><!-- [!代码 word:w-\[50cqw\] --><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) { … }`

目录