OneYoung

Appearance

网页响应式设计是现代化网页设计绕不开的一个话题。

值得庆幸的是，Tailwind CSS 默认提供了开箱即用的响应式设计工具。

1.媒体查询与Rem ​

Tailwind 内置了媒体查询和 rem 的结合式网页响应式设计。

  1. 媒体查询需要确保 html 中如下 DOM：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  1. rem 在浏览器默认的 font-size 是 16px

2.内置断点 ​

Tailwind 内置了以下 breakpoints：

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

从这个表格中，我们可以看出两点：

  1. 内置 5 个媒体查询断点，分别对应 sm、md、lg、xl 和 2xl。
  2. Working mobile-first 移动端优先，也就是说我们在使用 Tailwind CSS 时，设置的样式默认是在 sm 以下的样式。

如果我们想要设置 sm、md、lg、xl、2xl 以上的样式，那么我们需要使用 varient 来设置：

html
<div class="bg-red-100 sm:bg-red-200 md:bg-red-300 lg:bg-red-400 xl:bg-red-500 2xl:bg-red-600"></div>

如果想要更新粒度的来控制响应式设计，譬如想要在 sm-lg 之间设置，那么可以使用 max-*：

html
<div class="bg-red-100 sm:max-lg:bg-red-500"></div>

完全的 max-* 设置见下表：

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

3.自定义断点 ​

我们可以使用 --breakpoint-* 来自定义断点：

css
@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

如果需要使用没有意义的一次性断点，则可以使用 min 或 max 变量，使用任意值动态生成自定义断点：

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

4.断点样式变量 ​

假设有一个样式变量 --sidebar-width，我们想要它在不同的屏幕下显示不同的宽度，那么在 tailwindcss@4 版本中，推荐这样使用：

css
@media (min-width: theme(--breakpoint-sm)) {
  :root {
    --sidebar-width: 12rem;
  }
}

@media (min-width: theme(--breakpoint-md)) {
  :root {
    --sidebar-width: 14rem;
  }
}

笔者测试，在 tailwindcss@4.1.8 版本中，@screen 指令也是生效的，但在官方文档中已经查不到用法了。

css
@screen sm {
	--sidebar-width: 12rem;
}

@screen md {
	--sidebar-width: 14rem;
}

TIP

关于上述用法的抉择，您可以参考这个Discussion。

5.容器查询 ​

容器查询是现代化浏览器的新特性。

它允许**根据父元素的大小（而不是整个视口的大小）**来设置样式。

媒体查询的语句是 @media，而容器查询的语句是 @container。

在 Tailwind 中，可以直接这样使用：

html
<div class="@container">
  <div class="flex flex-col @md:flex-row @8xl:bg-sky-500">
    <!-- ... -->
  </div>
</div>

同样的，需要设定断点范围时，容器查询可以使用 @min-* 和 @max-*。

但不同于媒体查询的 --breakpoint-*，容器查询提供了 --container-* 样式变量：

css
@theme {
	--container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
}

对于使用多个嵌套容器的复杂设计，可以使用 @container/{name} 命名容器，譬如 @sm/{name} 和 @md/{name} 等：

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