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

核心概念

响应式设计

使用响应式工具变体构建自适应用户界面。

概述

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

首先,请确保您已在文档的 <head> 中添加了 viewport meta 标签

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
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="现代建筑艺术"      />    </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>

上面示例的工作原理:

  • 默认情况下,外层 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
<!-- 这只会使文本在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,并创建新的 xs3xl 断点,可在标记中使用:

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

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

使用任意值

如果你需要使用一个不适合包含在主题中的一次性断点,可以使用 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>

容器查询范围

将一个常规容器查询变体与一个最大宽度容器查询变体叠加使用,可以针对特定范围进行样式设置:

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) { … }
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy