Responsive design

概述

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

首先，确保已将viewport meta tag添加到文档的<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="..." />

默认情况下有五个断点，灵感来自常见的设备分辨率：

Breakpoint prefix	Minimum width	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。
当父元素是一个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>

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

删除默认断点

要删除默认断点，请将其值重置为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>

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

Using arbitrary values

Use variants like @min-[475px] and @max-[960px] for one-off container query sizes you don't want to add to your theme:

HTML

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

Using container query units

Use container query length units like cqw as arbitrary values in other utility classes to reference the container size:

HTML

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

Container size reference

By default, Tailwind includes container sizes ranging from 16rem (256px) to 80rem (1280px):

Variant	Minimum width	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) { … }`

On this page