配了三年 postcss-nesting，今天发现它终于可以彻底卸了——Tailwind v4 把这件事彻底变了

我配了三年 postcss-nesting，每次升级构建链都要把它列入清单——今天发现它已经从我的依赖里彻底消失了。

Tailwind CSS v4 跑在 Oxide 引擎上，这是 Rust 重写的编译器，从 2025 年初正式发布到现在一年多了，但有一个变化很多团队还没跟进：它输出的 CSS 是原生嵌套格式的。

以前用 Tailwind v3，构建链里必须有 postcss-nesting，因为 v3 输出的 CSS 是扁平的，嵌套要靠这个插件在构建时展开成 .card { } .card:hover { } 这种形式。v4 不一样了，它的 Oxide 引擎直接输出这样的东西：

.card {
  padding: 1rem;
  &:hover {
    border-color: gold;
  }
  & + & {
    margin-block-start: 0.5rem;
  }
}

浏览器自己认识这个语法，不需要任何展开步骤。这意味着 postcss-nesting 在 Tailwind v4 的场景里彻底失去了存在的意义——不是「可以用原生写法替代」，是「引擎已经直接输出原生写法了，你装它等于白跑一个 PostCSS Pass」。

数字说得很清楚。Tailwind 官方跑过基准测试，Catalyst UI 全量构建 v3 要 378ms，v4 只要 100ms；增量构建 v3 44ms，v4 只要 5ms；增量构建只改一个 class 的场景 v3 35ms，v4 192 微秒——低了两个数量级。这个差距不只是 Oxide 引擎快， postcss-nesting 那个展开 Pass 也一起省掉了。

不是 Tailwind 自己的场景才有效。Vercel、Netlify、Cloudflare Pages 这些平台跑 Tailwind v4 构建，每个 Commit 的构建时间里 PostCSS 那一 Pass 直接归零。对于高频 commit 的团队，这笔时间积累下来不是小数字。

有人会问：我的项目不只有 Tailwind，还有自己写的嵌套 CSS，那个 postcss-nesting 不能删。这个问题要分情况。如果你的项目里除了 Tailwind 输出的 CSS 就没有其他嵌套 CSS 了，那确实可以删——但实际项目中很多团队还有自己的组件样式，这些样式的嵌套在 v4 之前同样靠 postcss-nesting 处理。解决方案是：把所有嵌套 CSS 迁移到原生格式，然后删掉插件。迁移本身不复杂，两条规则：所有 & 开头的嵌套照旧，不受影响；原来用 @nest 包裹的嵌套改成直接写选择器，因为 @nest 已经被 CSSWG 从规范里移除了。

有人会问：旧浏览器不支持原生嵌套怎么办。2026 年了，Chrome 112+、Firefox 117+、Safari 16.5+ 加起来覆盖全球 96%+ 的流量。postcss-nesting 的主要功能现在只剩下给这个不到 4% 的旧浏览器存量做降级展开——但如果你的项目早就不支持 IE11 了，这个插件真的只剩一个空的 PostCSS Pass 在跑。

所以这件事的账很简单：Tailwind v4 + Oxide 引擎 → 输出原生 CSS nesting → postcss-nesting 变成空转的 Pass → 删掉它省一次 PostCSS 遍历 + 减少一次依赖维护。三年配 postcss-nesting，今天发现它变成了一道多余的构建步骤，删了。