Tailwind项目中写&会报错是因为PostCSS未启用嵌套解析，需在postcss.config.js中按顺序配置'tailwindcss/nesting': {}（必须在tailwindcss之前），并重启开发服务器。
为什么Tailwind项目里写 & 会报错？
因为默认不支持 CSS 嵌套语法。Vite 的 PostCSS 默认没启用嵌套解析，遇到 .parent { &.child { } } 这类写法时，会直接抛出 [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. 错误——这不是 Tailwind 的 bug，而是 PostCSS 插件链缺失。
必须加 tailwindcss/nesting 且顺序不能错
它不是可选插件，是启用嵌套的唯一合法入口，且必须排在 tailwindcss 之前。否则嵌套规则会在 Tailwind 处理前被跳过，或被 Tailwind 的解析器忽略。
-
postcss.config.js中必须包含'tailwindcss/nesting': {} - 该行必须写在
tailwindcss: {}之前，顺序颠倒会导致嵌套失效 -
tailwindcss/nesting是 Tailwind 内置插件，无需单独安装 - 重启开发服务器（
npm run dev）才能生效，热更新不触发 PostCSS 配置重载
嵌套写法本身有兼容边界
Tailwind 的 tailwindcss/nesting 基于 @csstools/postcss-nesting，只支持标准嵌套语法，不支持 Sass 风格的 @nest 或深度嵌套展开。
- ✅ 支持：
.btn { &:hover { ... } }、.card { & .title { ... } } - ❌ 不支持：
.card { @nest .title { ... } }、.a { .b { .c { ... } } }（三层无&的纯缩进嵌套） - 嵌套层级过深（>3 层）可能触发 PostCSS 性能警告，建议拆分为独立选择器
Vue 单文件组件里嵌套需额外注意作用域
如果在 <style scoped> 中使用 &，Vue 的 vue-loader 会先处理作用域，再交给 PostCSS。此时 & 可能被错误解析为父组件选择器而非当前组件根，导致生成的选择器不符合预期。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：嵌套逻辑较复杂时，改用
<style>（非 scoped），或把嵌套规则移到全局 CSS 文件 - 若坚持用 scoped，确保
postcss.config.js已正确配置，且 Vite 版本 ≥ 4.3（旧版对 scoped + nesting 兼容性差） - 检查编译后 CSS，确认生成的选择器是否带上了正确的 scope id，比如
.parent[data-v-f3f3f3f3] .child而非.parent .child
&，但 Vue 的 scoped 机制或 Tailwind 的 content 扫描可能让最终生成的选择器“存在却不可见”。务必在浏览器开发者工具中验证最终输出的 CSS 规则是否匹配目标元素。 
