1. 核心概念
  2. 响应式设计

核心概念

响应式设计

使用响应式实用程序变体来构建自适应用户界面。

概述

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

首先,请确保您已将视口 meta 标签添加到文档的<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
sm40rem (640px)@media (width >= 40rem) { ... }
md48rem (768px)@media (width >= 48rem) { ... }
lg64rem (1024px)@media (width >= 64rem) { ... }
xl80rem (1280px)@media (width >= 80rem) { ... }
2xl96rem (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>

以下是上面示例的工作原理

  • 默认情况下,外部 divdisplay: block,但是通过添加 md:flex 实用程序,它在中等屏幕及更大的屏幕上变为 display: flex
  • 当父级是 flex 容器时,我们要确保图像永远不会缩小,因此我们添加了 md:shrink-0 以防止在中等屏幕及更大的屏幕上缩小。从技术上讲,我们本可以使用 shrink-0,因为它在较小的屏幕上不会执行任何操作,但由于它仅在 md 屏幕上才重要,因此在类名称中明确这一点是一个好主意。
  • 在小屏幕上,默认情况下图像会自动全宽。在中等屏幕及更大的屏幕上,我们已将宽度限制为固定大小,并使用 md:h-full md:w-48 确保图像全高。

我们在此示例中仅使用了一个断点,但是您也可以使用 smlgxl2xl 响应式前缀轻松地在其他大小调整此组件。

移动优先工作

Tailwind 使用移动优先断点系统,类似于您在其他框架(如 Bootstrap)中可能习惯的系统。

这意味着未加前缀的实用程序(如 uppercase)在所有屏幕尺寸上都生效,而加前缀的实用程序(如 md:uppercase)仅在指定的断点 及以上 生效。

定位移动屏幕

这种方法最常让人们感到惊讶的是,要为移动设备设置样式,您需要使用实用程序的未加前缀的版本,而不是 sm: 加前缀的版本。不要将 sm: 视为“在小屏幕上”,而应将其视为“在小的 断点 上”。

不要使用 sm: 定位移动设备

HTML
<!-- This will only center text on screens 640px and wider, not on small screens --><div class="sm:text-center"></div>

使用未加前缀的实用程序来定位移动设备,并在较大的断点覆盖它们

HTML
<!-- This will center text on mobile, and left align it on screens 640px and wider --><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,并创建可在标记中使用的新的 xs3xl 断点

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;}

主题文档中了解有关删除默认主题值的更多信息。

使用任意值

如果您需要使用一个一次性的断点,该断点不适合包含在您的主题中,请使用 minmax 变体来使用任何任意值动态生成自定义断点。

<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>

容器查询范围

堆叠常规容器查询变体和 max-width 容器查询变体,以定位特定范围

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
@3xs16rem (256px)@container (width >= 16rem) { … }
@2xs18rem (288px)@container (width >= 18rem) { … }
@xs20rem (320px)@container (width >= 20rem) { … }
@sm24rem (384px)@container (width >= 24rem) { … }
@md28rem (448px)@container (width >= 28rem) { … }
@lg32rem (512px)@container (width >= 32rem) { … }
@xl36rem (576px)@container (width >= 36rem) { … }
@2xl42rem (672px)@container (width >= 42rem) { … }
@3xl48rem (768px)@container (width >= 48rem) { … }
@4xl56rem (896px)@container (width >= 56rem) { … }
@5xl64rem (1024px)@container (width >= 64rem) { … }
@6xl72rem (1152px)@container (width >= 72rem) { … }
@7xl80rem (1280px)@container (width >= 80rem) { … }
版权所有 © 2025 Tailwind Labs Inc.·商标政策