48. v4.3新特性详解

Tailwind CSS v4.3 是 2026 年 5 月发布的，带来了一批面向现代浏览器的新工具类和 CSS 指令。有了这些，很多以前需要手写 CSS 或者搞复杂 hack 的效果，现在直接写类名就行。

scrollbar 工具类：原生滚动条样式

v4.3 新增了一套完整的滚动条工具类，直接映射 CSS 的 scrollbar-width 和 scrollbar-color 属性，告别 -webkit-scrollbar 伪元素的私有 API。

滚动条宽度控制

<!-- 细滚动条 -->
<div class="scrollbar-thin">内容区域</div>

<!-- 自动宽度（浏览器默认） -->
<div class="scrollbar-auto">内容区域</div>

<!-- 完全隐藏滚动条但保留滚动功能 -->
<div class="scrollbar-none">内容区域</div>

对应的 CSS 输出：

.scrollbar-thin {
  scrollbar-width: thin;
}
.scrollbar-auto {
  scrollbar-width: auto;
}
.scrollbar-none {
  scrollbar-width: none;
}

滚动条颜色定制

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

滚动条间距

<!-- 为滚动条预留间距，避免内容被遮挡 -->
<div class="scrollbar-gutter-stable">内容区域</div>

@container-size：尺寸容器查询

v4.3 引入了 @container-size 工具类，用于创建尺寸容器（size container），支持包含 block-size 查询。与 v4.0 的 @container（仅支持 inline-size）互补。

基本用法

<!-- 创建尺寸容器，支持 cqb 等依赖 block-size 的单位 -->
<div class="@container-size">
  <div class="h-[50cqb]">高度是容器高度的 50%</div>
</div>

命名尺寸容器

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

与 @container 的区别

工具类	用途	支持的查询单位
@container	仅支持 inline-size 查询	cqw、cqi 等
@container-size	支持完整尺寸查询（含 block-size）	cqb、cqh 等

<!-- 基于块方向尺寸的查询 -->
<div class="@container-size">
  <div class="h-[50cqb]">使用 cqb 单位（需要尺寸容器）</div>
</div>

zoom-* 与 tab-* 工具类

v4.3 新增了两个直接映射 CSS 属性的工具类。

zoom：元素缩放

<!-- 放大到 150% -->
<div class="zoom-150">放大内容</div>

<!-- 缩小到 50% -->
<div class="zoom-50">缩小内容</div>

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

.zoom-150 {
  zoom: 1.5;
}
.zoom-50 {
  zoom: 0.5;
}

tab-*：制表符宽度

<!-- 制表符宽度为 2 字符 -->
<pre class="tab-2">代码缩进 2 空格</pre>

<!-- 制表符宽度为 4 字符 -->
<pre class="tab-4">代码缩进 4 空格</pre>

<!-- 自定义值 -->
<pre class="tab-github">使用主题定义的 8 字符制表符</pre>

.tab-2 {
  tab-size: 2;
}
.tab-4 {
  tab-size: 4;
}

逻辑属性工具类扩展

v4.2 进一步完善了逻辑属性体系，新增了 mbs-*、mbe-*、pbs-*、pbe-* 等工具类（v4.3 中继续可用）。

块方向起止边距

<!-- margin-block-start：逻辑顶部边距 -->
<div class="mbs-4">上方间距 1rem</div>

<!-- margin-block-end：逻辑底部边距 -->
<div class="mbe-8">下方间距 2rem</div>

<!-- padding-block-start：逻辑顶部内边距 -->
<div class="pbs-6">上方内距 1.5rem</div>

<!-- padding-block-end：逻辑底部内边距 -->
<div class="pbe-2">下方内距 0.5rem</div>

与物理属性的对应关系

逻辑属性	LTR 对应	RTL 对应
mbs-*	mt-*	mt-*
mbe-*	mb-*	mb-*
pbs-*	pt-*	pt-*
pbe-*	pb-*	pb-*
inset-s-*	left-*	right-*
inset-e-*	right-*	left-*

font-features-*：OpenType 特性控制

v4.2 新增 font-features-* 工具类（v4.3 中继续可用），让你直接控制字体的 OpenType 高级特性。

<!-- 启用等宽数字（表格对齐必备） -->
<td class="font-features-['tnum']">1,234.56</td>

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

<!-- 启用历史连字 -->
<span class="font-features-['hlig']">difficult</span>

.font-features-\[\'tnum\'\] {
  font-variant-numeric: tabular-nums;
}

常用 OpenType 特性标签：

标签	效果
tnum	等宽数字（表格对齐）
smcp	小型大写字母
liga	标准连字
hlig	历史连字
zero	带斜线的零

stacked / compound @variant

v4.3 增强了 @variant 指令，支持在 CSS 中直接嵌套多个伪状态或共享样式块。

堆叠变体

.my-element {
  background: white;

  /* 同时应用 hover 和 focus 状态 */
  @variant hover:focus {
    background: black;
  }
}

编译后的 CSS：

.my-element {
  background: white;
}
.my-element:hover:focus {
  background: black;
}

逗号分隔多变体

.my-element {
  background: white;

  /* hover 或 focus 任一状态生效 */
  @variant hover, focus {
    background: black;
  }
}

编译后：

.my-element {
  background: white;
}
.my-element:hover {
  background: black;
}
.my-element:focus {
  background: black;
}

functional utilities 默认值

v4.3 引入 --default() 函数，让工具类在无参数时也能使用默认值。

定义带默认值的工具类

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

现在两种写法都有效：

<!-- 显式指定值 -->
<pre class="tab-2">2 字符制表符</pre>

<!-- 使用默认值 4 -->
<pre class="tab">默认 4 字符制表符</pre>

编译结果

.tab {
  tab-size: 4;
}
.tab-2 {
  tab-size: 2;
}

新增调色板（v4.2 延续）

v4.2 引入的四个中性色板在 v4.3 中继续可用：

色板	用途
mauve	偏紫的灰色，适合深色主题
olive	偏绿的灰色，适合自然风格
mist	偏蓝的灰色，适合冷色调 UI
taupe	偏棕的灰色，适合暖色调 UI

<div class="bg-mauve-100 text-mauve-900">mauve 色板</div>
<div class="bg-olive-200 text-olive-800">olive 色板</div>
<div class="bg-mist-50 text-mist-950">mist 色板</div>
<div class="bg-taupe-300 text-taupe-700">taupe 色板</div>

特性速查表

特性	工具类/指令	用途
滚动条宽度	scrollbar-thin/auto/none	控制滚动条外观
滚动条颜色	scrollbar-thumb-*, scrollbar-track-*	定制滚动条颜色
滚动条间距	scrollbar-gutter-stable	为滚动条预留空间
尺寸容器	@container-size/{name}	完整容器查询
元素缩放	zoom-*	CSS zoom 属性
制表符宽度	tab-*	CSS tab-size 属性
逻辑属性	mbs-*, mbe-*, pbs-*, pbe-*	块方向起止间距
OpenType	font-features-*	字体高级特性
堆叠变体	@variant hover:focus	多状态组合
默认值	--default()	工具类默认参数