38. Zoom 与 Tab Size（v4.3 新特性）

v4.3 是 2026 年 5 月发布的，加了一批实用工具类。zoom-* 和 tab-* 这两个直接映射 CSS 属性，简单但好用。

zoom-* 工具类

zoom 是一个非标准的 CSS 属性，但浏览器支持率很高。它可以缩放整个元素及其内容，类似于 transform: scale() 但更彻底：

<!-- 缩放到 80% -->
<div class="zoom-80">整体缩放到 80%</div>

<!-- 缩放到 110% -->
<div class="zoom-110">整体放大到 110%</div>

<!-- 重置缩放 -->
<div class="zoom-100">正常大小</div>

可用的缩放值：

zoom-50   → zoom: 0.5
zoom-75   → zoom: 0.75
zoom-80   → zoom: 0.8
zoom-90   → zoom: 0.9
zoom-95   → zoom: 0.95
zoom-100  → zoom: 1
zoom-105  → zoom: 1.05
zoom-110  → zoom: 1.1
zoom-125  → zoom: 1.25
zoom-150  → zoom: 1.5

实际应用场景：

<!-- 打印预览缩放 -->
<div class="zoom-75 origin-top-left">
  打印预览内容（缩小到 75% 查看整体布局）
</div>

<!-- 移动端适配 -->
<div class="zoom-90 md:zoom-100">
  在移动端稍微缩小以显示更多内容
</div>

<!-- 模态框内容缩放 -->
<div class="zoom-[85%]">
  自定义缩放值
</div>

tab-* 工具类

tab-size 控制制表符（Tab 字符）在代码块中的显示宽度：

<!-- Tab 宽度为 2 个字符 -->
<pre class="tab-2"><code>function hello() {
  if (true) {
    console.log("hello");
  }
}</code></pre>

<!-- Tab 宽度为 4 个字符（常用默认值） -->
<pre class="tab-4"><code>function hello() {
  if (true) {
    console.log("hello");
  }
}</code></pre>

<!-- Tab 宽度为 8 个字符 -->
<pre class="tab-8"><code>代码展示</code></pre>

可用的 tab-size 值：

tab-2  → tab-size: 2
tab-4  → tab-size: 4
tab-8  → tab-size: 8

还可以使用主题中定义的自定义值：

@theme {
  --tab-size-github: 8;
}

<pre class="tab-github"><code>使用 GitHub 风格的 8 字符 tab</code></pre>

@container-size：尺寸容器查询

v4.3 还引入了 @container-size 工具类，用于创建支持完整尺寸查询的容器（包括 block-size 依赖的单位如 cqb）：

<!-- 创建命名尺寸容器 -->
<div class="@container-size/sidebar">
  <div class="@sidebar:bg-red-500">
    当名为 sidebar 的容器宽度达到断点时变红
  </div>
</div>

<!-- 使用 cqb 单位需要尺寸容器 -->
<div class="@container-size">
  <div class="h-[50cqb]">高度是容器高度的 50%</div>
</div>

这个特性让容器查询更灵活，可以基于尺寸创建命名容器，支持 cqb 等依赖 block-size 的单位。

其他 v4.3 新特性概览

除了 zoom-* 和 tab-*，v4.3 还带来了：

scrollbar 工具类

<!-- 细滚动条 -->
<div class="scrollbar-thin">细滚动条样式</div>

<!-- 自动样式滚动条 -->
<div class="scrollbar-auto">自动滚动条</div>

<!-- 隐藏滚动条 -->
<div class="scrollbar-none">隐藏滚动条</div>

<!-- 自定义滚动条颜色 -->
<div class="scrollbar-thumb-gray-300 scrollbar-track-gray-100">
  自定义颜色的滚动条
</div>

<!-- 滚动条 gutter -->
<div class="scrollbar-gutter-stable">
  为滚动条预留空间，避免布局跳动
</div>

font-features-* 工具类

控制 OpenType 字体特性：

<!-- 使用等宽数字 -->
<td class="font-features-['tnum']">12345.67</td>

<!-- 使用小型大写字母 -->
<span class="font-features-['smcp']">Hello World</span>

stacked/compound @variant

在 CSS 中嵌套多个伪状态：

.my-element {
  background: white;
  
  /* 同时应用 hover 和 focus 状态 */
  @variant hover:focus {
    background: black;
  }
  
  /* 多个变体共享样式 */
  @variant hover, focus {
    outline: 2px solid blue;
  }
}

functional utilities 默认值

定义无值也可用的工具类：

@utility tab-* {
  tab-size: --value(integer, --default(4));
}

<!-- 使用默认值 4 -->
<pre class="tab"><code>代码</code></pre>

<!-- 指定值 -->
<pre class="tab-2"><code>代码</code></pre>

版本兼容性

这些特性仅在 Tailwind CSS v4.3+ 中可用。如果你的项目还在使用 v4.2 或更早版本，需要升级：

npm install tailwindcss@latest @tailwindcss/vite@latest