5 月 8 日，Tailwind CSS 官方博客突然更新，一次性把 v4.2 和 v4.3 两个版本的功能全抖了出来。
官方的原话是："because apparently shipping v4.2 was easier than remembering to blog about it, this post is secretly about two releases worth of new stuff."
翻译一下：v4.2 发完忘了写博客，干脆跟 v4.3 一起说。
看完官方博客后的感受：这 10 个新功能，没有一个是"锦上添花"的，全是前端日常开发里天天遇到、天天头疼的痛点。
一、Webpack 用户终于不用忍了：官方专属 Loader，构建快一倍
用 Next.js 或 Webpack 的开发者，长期被 Tailwind 的构建速度折磨。以前走的是 PostCSS 中转，编译链路长、速度慢，大项目等构建等到怀疑人生。
v4.2 直接出了官方专属 Webpack Loader，彻底告别 PostCSS 绕路。
用法极简，替换一行配置就行：
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],
},
],
},
};
安装命令：
npm install tailwindcss@latest @tailwindcss/webpack@latest
Webpack 用户必升，这几乎是 v4.2 最实用的改动之一。
二、4 组新中性色：UI 高级感，不用自己调了
v4.2 新增了 mauve（淡紫灰）、olive（橄榄灰）、mist（雾灰）、taupe（灰褐色） 四组中性色。
官方说得很实在：这些颜色最初是为 Tailwind Plus 的 Oatmeal 主题套件设计的，"where we needed a few more neutral-ish palettes that still felt distinct from the grays we already ship."
意思就是：gray、zinc、neutral、stone、slate 用腻了，需要几个"有点个性但不张扬"的替代色。
<div class="bg-mauve-950 text-mauve-100">Mauve</div>
<div class="bg-olive-100 text-olive-950">Olive</div>
<div class="border border-mist-200 shadow-taupe-950/10">Mist and taupe</div>
做现代 UI 设计的，这四个色系的柔和度和层次感，确实比纯 gray 更耐看。
三、逻辑属性工具类：国际化布局，一行搞定
做 RTL（从右到左）布局或者多语言项目，以前被 left/right、top/bottom 搞到头秃。v4.2 补全了完整的逻辑属性工具类。
间距类：
mbs-*（margin-block-start）mbe-*（margin-block-end）pbs-*、pbe-*（padding-block-start/end）
尺寸类：
block-*、inline-*max-block-*、min-inline-*
定位类：
inset-s-*、inset-e-*（start/end）inset-bs-*、inset-be-*（block-start/end）
<div class="mbs-6 mbe-2 pbs-4 pbe-8 inset-s-0 inset-e-4">
自动适配 LTR/RTL，不用写兼容代码
</div>
官方特别提到，这些改进是跟 Netflix 和 Vercel 的团队合作完成的。
大厂都在用的东西，可靠性不用怀疑。
四、原生滚动条工具类：终于不用查浏览器兼容表了
这是 v4.3 的头号重磅功能，也是我看完最想升级的理由。
以前自定义滚动条，要记一堆半死不活的浏览器 API：
- Chrome/Safari 用
::-webkit-scrollbar - Firefox 用
scrollbar-width和scrollbar-color - 还要处理
scrollbar-gutter防止布局抖动
v4.3 直接给了官方原生工具类，全浏览器兼容。
宽度控制：
scrollbar-auto— 默认scrollbar-thin— 细款scrollbar-none— 隐藏
颜色控制：
scrollbar-thumb-*— 滑块颜色scrollbar-track-*— 轨道颜色
防布局抖动：
scrollbar-gutter-stable— 滚动条出现时不挤压内容
<div class="overflow-auto scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100">
内容区域，滚动条自动适配
</div>
官方博客的示例更狠，直接拿 scrollbar-thumb-slate-900/60 这种带透明度的写法做演示：
<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">
再也不用写 10 行兼容 CSS 了，3 个类名搞定。
五、容器查询升级：@container-size 终于支持高度了
Tailwind 的 @container 以前只支持宽度查询，高度适配只能手写 CSS 或上 JS。
v4.3 新增了 @container-size，同时支持宽高尺寸查询。
<!-- 创建尺寸容器（宽高都可查询） -->
<div class="@container-size">
<!-- 基于容器高度自适应 -->
<div class="h-[50cqb]">自适应高度内容</div>
</div>
卡片瀑布流、复杂自适应布局，以前要靠 JS 计算容器高度再动态改样式，现在 CSS 一句话搞定。
六、实用小工具
1. zoom-* 缩放工具类
v4.3 新增 zoom-50、zoom-100、zoom-150，直接调用原生 CSS zoom 属性。
官方的原话是："now that every browser has finally agreed it exists"——终于所有浏览器都认这个属性了，Tailwind 才敢放心加进来。
2. tab-* 控制 Tab 字符宽度
tab-2、tab-4、tab-8，控制 tab-size，代码块、预格式化文本必备。
官方还皮了一下：
"Just remember a tab size over 4 is a crime and may result in the suspension of your software engineering license."
（Tab 宽度超过 4 是犯罪，可能会导致你的软件工程师执照被吊销。）
用 8 个空格的人，官方在 diss 你。
3. font-features-* 字体特性控制
v4.2 新增，控制 OpenType 高级特性，比如数字等宽（tnum）、连字、特殊字形，不用手写 @font-feature-settings。
4. 复合变体 + 默认值工具
v4.3 支持在 CSS 里直接用堆叠变体和复合变体：
.button {
background: var(--color-sky-500);
@variant hover:focus {
background: var(--color-sky-600);
}
}
以及自定义工具类支持默认值：
@utility tab-* {
tab-size: --value(integer, --default(4));
}
这样 tab 默认是 4，tab-2 自定义为 2，API 更简洁。
七、怎么升级？官方给了四种方式
# Tailwind CLI
npm install tailwindcss@latest @tailwindcss/cli@latest
# Vite
npm install tailwindcss@latest @tailwindcss/vite@latest
# PostCSS
npm install tailwindcss@latest @tailwindcss/postcss@latest
# Webpack
npm install tailwindcss@latest @tailwindcss/webpack@latest
官方博客明确说了：原有类名 100% 兼容，零配置升级，无破坏性变更。
写在最后
从 v4.0 到 v4.3，Tailwind CSS 的更新节奏很快，但每一次都精准踩中前端痛点。
这次 v4.2 + v4.3 的 10 个新功能，我总结成三句话：
- Webpack 用户：专属 Loader 让构建快一倍，必升
- 颜值党：4 组新中性色 + 原生滚动条工具类，UI 高级感拉满
- 实用派：容器查询支持高度、zoom 缩放、tab 宽度控制、逻辑属性补全，日常开发省大量时间
还在手写 -webkit-scrollbar 兼容代码、自己调中性色、用 JS 算容器高度？升级 Tailwind 4.3，这些烦心事一次性解决。
你最想用的是哪个新功能？评论区聊聊～
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在前端的海洋里乘风破浪！
