Tailwind CSS v4.2/v4.3 迁移笔记：四套新调色板、webpack 插件与 scrollbar 工具

Tailwind CSS v4.2 发布于 2026-02-18，v4.3 发布于 2026-05-08。官方博客提到，v4.2 当时没有单独发博客，v4.3 这篇把两版一起讲了。以下按版本整理新增工具、弃用项、迁移命令和兼容性。

v4.2：新调色板、webpack 插件与逻辑属性

四套新调色板

默认主题加入四套偏中性的调色板：mauve、olive、mist、taupe。它们位于已有的 gray、zinc、neutral、stone、slate 之外。

官方 @tailwindcss/webpack 插件

新增官方 @tailwindcss/webpack 包，Tailwind 可以直接作为 webpack 插件运行，不再需要 PostCSS 中转。大 webpack 项目构建提速 2 倍以上；对 Next.js、Turbopack 等同样适用。

逻辑属性工具

新增一组逻辑属性工具，会随 writing-mode 与文字方向自适应（如 vertical-rl、rtl）：

• 间距：pbs-* / pbe-*（padding-block-start/end）、mbs-* / mbe-*（margin-block-start/end）、scroll-pbs-* / scroll-mbs-*、border-bs-* / border-be-*
• 尺寸：inline-* / min-inline-* / max-inline-*、block-* / min-block-* / max-block-*
• 定位：inset-s-* / inset-e-* / inset-bs-* / inset-be-*

font-features-* 工具

新增 font-features-* 工具，直接映射 CSS font-feature-settings。可以用任意 OpenType tag，适合比 tabular-nums 更通用的场景；支持任意值。

弃用 start-/end-

start-* 与 end-* 被弃用，保留可用但会告警。替代写法是 inset-s-* / inset-e-*，或 block/inline 等价类。

迁移对照：

• start-4 → inset-s-4
• end-2 → inset-e-2

v4.3：scrollbar、@container-size 与更多工具

• scrollbar 工具：用于样式化滚动条，并提供 scrollbar-gutter-auto / scrollbar-gutter-stable / scrollbar-gutter-both，在出现滚动条时避免布局跳动。
• @container-size：创建 size container，让容器查询能关心高度，而不只是 v4.0 的 inline-size @container。
• zoom- 工具*：对应 CSS zoom 属性。
• tab- 工具*：控制 tab 字符渲染宽度，对应 tab-size。
• 堆叠 + 复合 @variant 支持：可在 CSS 里直接使用。
• functional utility 默认值：可给 --value() / --modifier() 传 --default(...)，让工具带值或不带值都能用。

v4.2.x 补丁

• 从 4.2.2 起，@tailwindcss/vite 支持 Vite 8。
• 4.2.3 增强 canonicalization：px-[1.2rem] py-[1.2rem] 自动并成 p-[1.2rem]；方向性边框并成 -y- / -x-；overflow-ellipsis → text-ellipsis。

安装与兼容性

安装方式保持简单：安装最新 Tailwind，再加上对应构建工具的集成包，例如 webpack 用 @tailwindcss/webpack。

npm install tailwindcss@latest
npm install @tailwindcss/webpack

v4.2 与 v4.0/4.1 向后兼容。唯一算破坏性的是 start-* / end-* 弃用告警；旧类仍可用，但迁移到 inset-s-* / inset-e-* 可以消除告警。

类名迁移对照

来源：tailwindcss GitHub v4.2.0 release / CHANGELOG、tailwindcss.com blog "Tailwind CSS v4.3"、believemy 指南、versionlog。