响应式设计 - Tailwind CSS

概述

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。
当父级是弹性容器时，我们希望确保图像永不缩小，因此我们添加了 md:shrink-0 以防止在中等屏幕及更大的屏幕上缩小。从技术上讲，我们可以只使用 shrink-0，因为它在较小的屏幕上不会执行任何操作，但由于它只在 md 屏幕上才重要，因此最好在类名中明确说明这一点。
在小屏幕上，图像默认自动为全宽。在中等屏幕及更大的屏幕上，我们将宽度限制为固定大小，并使用 md:h-full md:w-48 确保图像为全高。

我们在此示例中仅使用了一个断点，但您也可以使用 sm、lg、xl 或 2xl 响应前缀轻松地以其他尺寸自定义此组件。

移动优先

默认情况下，Tailwind 使用移动优先断点系统，类似于您在 Bootstrap 等其他框架中使用的系统。

这意味着不带前缀的实用程序（如 uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如 md:uppercase）仅在指定的断点及以上有效。

针对移动屏幕

这种方法最常让人感到惊讶的是，要为移动设备设计某些样式，您需要使用实用程序的无前缀版本，而不是带有 sm: 前缀的版本。不要将 sm: 视为在小屏幕上，而应将其视为在小的*断点*处。

请勿使用 sm: 来定位移动设备

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

使用不带前缀的实用程序来定位移动设备，并在更大的断点处覆盖它们

<!-- 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-* 修饰符堆叠在一起，以将该样式限制在特定范围内：

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

阅读targeting breakpoint ranges以了解更多信息。

使用自定义断点

定制你的主题

您可以在 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) { ... }
    },
  }
}

在customizing breakpoints documentation中了解更多信息。

任意值如果您需要使用没有意义的一次性断点，请使用 `min` 或 `max` 修饰符，使用任意值动态生成自定义断点。

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

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

On this page