tailwind 中禁止手写嵌套选择器（如 .card .header h2），因其脱离原子化机制、无法被 jit 扫描和响应式处理；必须用 @layer 分层管理样式，配合 z-index 与 display 上下文控制实现可控嵌套。
不能靠写嵌套选择器来“模拟”Sass式语法，Tailwind 的设计契约根本不允许运行时解析父子关系；真正可控、可维护的多层嵌套样式控制，必须靠 @layer 分层 + 定位上下文管理 + z-index 协同。
为什么直接写 .card .header h2 不推荐
Tailwind 的工具类（如 text-xl、font-bold）是原子化的，它们不携带选择器层级语义。你手写 .card .header h2 这类 CSS 规则，本质上脱离了 Tailwind 的类名提取机制——构建时不会识别它，也不会被 JIT 引擎扫描，更无法享受响应式前缀（如 md:text-2xl）自动注入。它只是普通 CSS，和 Tailwind 并行存在，但不协同。
常见错误现象：
- 你在
src/styles.css里写了.modal .overlay { background: rgba(0,0,0,0.5); }，结果 dev server 热更新后样式消失——因为 PostCSS 没在该文件上下文中触发 Tailwind 的扫描逻辑 - 加了
md:前缀却没生效，因为自定义选择器不在content配置路径里，JIT 直接跳过 - 和第三方组件库样式冲突时，靠权重硬顶（比如加
!important），后续维护成本飙升
@layer 是唯一正解：分层不是可选，是必需
@layer 不是语法糖，它是 Tailwind 生态中解决「谁先覆盖谁」问题的基础设施。所有自定义样式，只要想和 @tailwind utilities 公平对话，就必须显式归入某一层。
关键事实：
- Tailwind 默认把工具类注入
@layer utilities，而你的普通 CSS 规则默认落在未声明层（等价于@layer base），天然被压制 - 层优先级由声明顺序决定：
@layer base@layer components @layer utilities，不是文件加载顺序 - 同一层可在多个文件中声明，内容自动合并；但不能在
@layer内再嵌套@layer
正确做法示例（放在你自己的 styles.css 中，且确保它在 @tailwind utilities 之后引入）：
@layer components {
.card-header {
@apply px-6 py-4 border-b border-gray-200;
}
}
<p>@layer utilities {
.text-emphasis {
@apply text-indigo-700 font-semibold;
}
}</p>
这样写，.text-emphasis 就和 text-blue-500 处于同一层级，按源码顺序决定覆盖关系，不再被“静默压制”。
嵌套布局中 z-index 失效？先查 stacking context
多层嵌套 UI（比如弹窗里有下拉菜单，下拉菜单里还有 tooltip）看似是 z-index 数值问题，实则是层叠上下文（stacking context）断裂导致的。
典型症状：
- 给 tooltip 加了
z-50，但它仍被 modal content 盖住 - 父容器用了
transform: scale(1)或opacity: 0.99，子元素的z-60完全失效 - 移动端键盘弹出后浮层突然消失——根上下文被 WebView 重置
解决方案不是堆数字：
- 确认父容器是否创建了新上下文：检查 computed styles 中是否有
transform、filter、opacity 、<code>will-change等属性 - 用
z-auto替代硬编码值，让浏览器按 DOM 顺序自然叠放（适用于纯静态嵌套） - 在
tailwind.config.js中扩展语义化 z-index，例如：tooltip: '999'、modal: '1000'，避免未来因版本升级导致数值错位
grid-cols 嵌套失效？根源在 display 上下文丢失
grid-cols-* 类只对直系 Grid 容器生效。如果你在 flex 布局的卡片内部加了一个 grid grid-cols-3 的 div，却没效果，大概率是它的父容器没触发网格上下文，或者宽度被 flex-shrink 锁死。
快速验证步骤：
- 打开 DevTools → Layout 面板 → 看目标 div 的
display是否真为grid（不是block或flex） - 检查父容器是否设置了
min-width、flex-shrink: 0，导致子 grid 容器没有足够空间生成列轨道 - 确认
gap类只作用于当前 grid 容器的直接子项，嵌套 grid 的gap不会“穿透”到外层
安全写法：
<div class="flex">
<div class="w-1/2">
<!-- 此处加 grid，必须确保 w-1/2 提供明确宽度 -->
<div class="grid grid-cols-3 gap-4">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div>
</div>
真正卡住人的，从来不是类名写不对，而是没意识到：每个嵌套层级都依赖上一级的 display 上下文是否就绪、是否被意外截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
