Tailwind教程

响应式设计的前提

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

设备分辨率

断点前缀	最小宽度	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

移动优先工作

• Tailwind 使用移动优先断点系统,这意味着未加前缀的工具类（如 uppercase）在所有屏幕尺寸上都生效，而带有前缀的工具类（如 md:uppercase）仅在指定的断点 及以上 生效。因此，通常最好先为设计实现移动布局，然后再增加适合 sm 屏幕的任何更改，然后是 md 屏幕等等。

针对断点范围

• 默认情况下，通过类似 md:flex 的规则应用的样式将在该断点生效并保持在更大的断点上。
• 如果您希望在仅在特定断点范围内应用某个工具，可以将像 md 这样的响应变体与 max-* 变体堆叠，以限制该样式到特定范围：

<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) { ... }

什么是容器查询？

• 容器查询 是一种现代 CSS 特性，允许您根据父元素的大小来为某个元素设置样式，而不是根据整个视口的大小。它们使您能够构建更具可移植性和可重用性的组件，因为它们可以根据该组件实际可用的空间进行更改。
• 使用 @container 类将元素标记为内联尺寸容器，然后使用 @sm 和 @md 等变体根据容器大小来设置子元素的样式：

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- 我曾想让自己融入梦境里，试曾回忆起梦里的点滴，在梦里，现实生活情景如影随现，想起泪如雨下，安慰自己，这只是梦，但在安静的夜晚，又不想从梦醒来 -->
  </div>
</div>

• 与断点变体一样，容器查询在 Tailwind CSS 中是移动优先的，并在目标容器大小及以上应用。

容器查询范围

• 将常规容器查询变体与最大宽度容器查询变体堆叠，以目标特定范围：

<div class="@container">
  <div class="flex flex-row @sm:@max-md:flex-col">
    <!-- ... -->
  </div>
</div>

命名容器

• 对于使用多个嵌套容器的复杂设计，您可以使用 @container/{name} 命名容器，并使用像 @sm/{name} 和 @md/{name} 这样的变体来定位特定的容器：

<div class="@container/main">
  <!-- ... -->
  <div class="flex flex-row @sm/main:flex-col">
    <!-- ... -->
  </div>
</div>