响应式设计

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

概览

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

默认情况下有五个断点，受常见设备分辨率启发：

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

要添加一个实用程序，但只在特定断点生效，你只需要在实用程序前加上断点名称，然后加上 : 字符即可：

<!-- 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="...">

这适用于框架中的每个实用类，这意味着您可以在给定的断点上更改几乎任何内容，甚至包括字母间距或光标样式。

这是一个营销页面组件的简单示例，在小屏幕上使用堆叠布局，在大屏幕上使用并排布局（调整浏览器大小以查看效果）。

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden 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="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
      <p class="mt-2 text-slate-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:` 来针对移动设备

<!-- 这只会使文字在 640px 或更宽的屏幕上居中，而不会在小屏幕上居中。 -->
<div class="sm:text-center"></div>

✓ 使用无前缀的实用工具来针对移动设备，并在较大的断点处进行覆盖

<!-- 这将使文本在移动设备上居中对齐，在 640px 或更宽的屏幕上向左对齐 -->
<div class="text-center sm:text-left"></div>

因此，通常最好先实施设计的移动布局，然后添加任何对 sm 屏幕有意义的更改，然后是 md 屏幕，依此类推。

针对断点范围

默认情况下，规则应用的样式，如 md:flex ，将应用于该断点，并在较大的断点上保持应用。

如果您想在特定断点范围处应用实用程序，请堆叠响应式修饰符，如 md ，并使用 max-* 修饰符来限制该样式仅适用于特定范围：

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwind 为每个断点生成相应的 max-* 修改器，因此开箱即用，以下修改器可用：

Modifier	Media query
max-sm	@media not all and (min-width: 640px) { ... }
max-md	@media not all and (min-width: 768px) { ... }
max-lg	@media not all and (min-width: 1024px) { ... }
max-xl	@media not all and (min-width: 1280px) { ... }
max-2xl	@media not all and (min-width: 1536px) { ... }

针对单一断点

要针对单个断点进行定位，请通过堆叠响应式修饰符，如 md 与下一个断点的 max-* 修饰符，来定位该断点的范围：

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

阅读有关目标断点范围的信息。

使用自定义断点

定制您的主题

您可以完全自定义您的 tailwind.config.js 文件中的断点：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

在自定义断点文档中了解更多信息。

任意值

如果您需要使用一个临时断点，而这个断点在您的主题中没有意义，可以使用 min 或 max 修饰符，使用任意值即可即时生成自定义断点。

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

在任意值文档中了解更多关于任意值支持的信息。