必须选用postcss-nesting（v10+）而非postcss-nested，二者不兼容；需卸载后者、升级前者，配置中置于autoprefixer和tailwindcss之前，且@nest &必须紧贴最左、单层展开，否则静默失效。
确认你用的是 postcss-nesting，不是 postcss-nested
名字只差一个字母，但行为完全不兼容：postcss-nested 是 Sass 风格模拟器，不解析 @nest，也不校验 & 位置；postcss-nesting（v10+）才是对齐原生规范的实现。运行 npm list postcss-nesting，如果版本是 9.x 或更低，必须升级；旧版会把 @nest & h2 当普通文本放过，不报错也不处理。
常见错误现象：
-
npm install postcss-nesting后仍无效 → 检查是否残留postcss-nested，执行npm uninstall postcss-nested彻底清除 - 写
.card { @nest & h2 { color: red; } }却编译出空规则 → 插件没加载，或被其他插件提前截断
postcss-nesting 必须放在 autoprefixer 和 tailwindcss 之前
它需要看到原始的 @nest 结构，一旦被 autoprefixer 或 tailwindcss 处理过选择器，嵌套信息就丢失了。在 postcss.config.js 中，顺序必须是：
module.exports = {
plugins: [
require('postcss-nesting'),
require('autoprefixer'),
require('tailwindcss')
]
}
Tailwind 用户注意：tailwindcss/nesting 是内置插件，但只在 v3.3+ 提供，且必须显式写在 tailwindcss 配置项之前，不能靠自动发现。
容易踩的坑：
- Vite 项目中，若在
vite.config.ts手动配置css.postcss.plugins，必须显式写入require('postcss-nesting')，否则不会生效 - Webpack +
css-loader场景下，postcss-loader必须排在css-loader之前，否则嵌套块被当普通字符串传过去
@nest & 的写法必须严格合规，否则静默丢弃
v10+ 版本不再“宽容”，所有规则按字面解析：错一个空格、少一个 &、多一层嵌套，整条规则就被跳过，DevTools 里完全看不到对应样式，也不报错。
合法写法示例：
-
@nest & h2✅ -
@nest &.is-active✅（BEM 修饰符） -
@nest & > header + section✅（复杂关系）
非法写法示例：
-
@nest h2 &❌（&不在最左） -
@nest & ul { @nest & li { } }❌（不支持嵌套@nest） -
.card { & h2 { } }❌（无@nest，v10+ 直接跳过）
构建后必须检查输出 CSS，而不是只信源码
很多问题表面是“没生效”，实际是转换失败或 loader 没触发。打开编译后的 CSS 文件，搜索 .card h2 这类展开结果 —— 如果没出现，说明 postcss-nesting 根本没跑；如果出现了但浏览器没应用，再查是否被 css-loader 的 esModule 选项误处理，或被压缩工具删掉了注释/空格导致结构破坏。
真正容易被忽略的是 Safari 17.3 对 &:hover 的兼容缺陷：本地 Chrome 能跑，线上 iOS Safari 17.3 可能静默失效，且 DevTools 不提示任何异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
