响应式设计

概述

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

首先，确保您已将视口元标签添加到文档的<head>中：

index.html

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

然后，要添加一个工具类，但仅在特定断点生效，您只需在工具名前加上断点名称，然后加上:字符：

HTML

<!-- 默认宽度为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="现代建筑风格"
      />
    </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工具类，它在中等屏幕及更大屏幕上变为flex。
当父元素是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 {
  --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>

请注意，在定义断点时始终使用相同的单位很重要，否则生成的工具可能会以意外的顺序排序，导致断点类相互覆盖。

Tailwind对默认断点使用rem，因此如果您向默认值添加其他断点，请确保使用rem。

在主题文档中了解有关自定义主题的更多信息。

移除默认断点

要移除默认断点，请将其值重置为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) { … }`

目录