响应式设计 - Tailwind CSS 中文

概述

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

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

断点前缀	最小宽度	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: 理解为“在小屏幕上”，而应理解为“在小断点上”。

不要使用 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-* 修饰符，因此开箱即用，以下修饰符可用

修饰符	媒体查询
`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>

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

在本页