Tailwind CSS v4 嵌套由 Rust Oxide 引擎原生支持 CSS Nesting Level 1 规范，必须显式使用 & 开头，不支持隐式嵌套；@layer 必须位于最外层，@apply 不可与动态伪类混用，且不支持 :has() 内嵌套或 @theme 中使用 &。
Tailwind CSS v4 的嵌套不是“模拟”或“语法糖”，而是直接由 Rust 编写的 Oxide 引擎原生解析 CSS Nesting Level 1 规范——&、&:hover、&::before 全部合法，且能正确生成组合选择器，无需 PostCSS 插件介入。
嵌套写法必须用 & 显式引用父选择器
v4 不支持省略 & 的隐式嵌套（比如 .card { .header { ... } } 会静默忽略）。所有子规则必须以 & 开头，否则被当作独立选择器处理，导致样式不生效或编译失败。
-
.card { &__header { font-size: 1.25rem; } }→ 正确，生成.card__header -
.card { __header { color: red; } }→ 错误，__header被当作文本选择器，找不到对应元素 -
.btn { &:hover { @apply bg-blue-600; } }→ 正确，&:hover解析为.btn:hover -
.form-group { &:focus-within { @apply ring-2 ring-blue-500; } }→ 正确，但注意：@apply只展开已注册的工具类，不能用于未定义的伪类变体
@layer 内部嵌套需严格遵循声明顺序
在 @layer components 或 @layer utilities 中写嵌套时，@layer 必须出现在最外层，且不能嵌套在其他规则内。否则 Oxide 引擎会因语法树构建失败而抛出 missing '}' 类错误。
- ✅ 正确：
@layer components { .card { &__header { margin-bottom: 0.5rem; } &:hover { @apply shadow-md; } } } - ❌ 错误：
.wrapper { @layer components { .card { &__header { ... } } } }——@layer不能出现在选择器块内部 - ⚠️ 注意：
@layer声明必须早于所有使用它的规则；若在@import "tailwindcss"之后才写@layer，部分规则可能不被注入
@apply 和嵌套不能混用在同一个作用域
@apply 是静态原子类拼接机制，它不参与运行时选择器构造。把 &:focus-within 这类动态伪类塞进 @apply 里，Oxide 引擎会在解析阶段报错或跳过整条规则。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
.form-group { @apply flex; &:focus-within { @apply ring-2 ring-blue-500; } // 这里没问题 } // 但下面这句不行： .form-group:focus-within { @apply ring-2 ring-blue-500; } // ✅ 正确路径 - ✅ 正确分工：用原生嵌套组织结构层级，用
@apply复用已有工具类；二者不要交叉嵌套 - ? 提示：如果需要复用带状态的样式组合，应提前在
@layer utilities中定义原子类，例如：@layer utilities { .focus-ring-blue { @apply focus:ring-2 focus:ring-blue-500; } }再在 HTML 中直接使用class="focus-ring-blue"
真正容易被忽略的是嵌套与 @theme、:has() 的组合边界：Oxide 虽支持嵌套，但不支持在 :has() 内部再嵌套（:has(.card &__header) 无效），也不支持 & 在 @theme 块中出现。这些限制不是 bug，而是 CSS Nesting Level 1 规范本身未覆盖的场景。
