z-index在tailwind中失效的根本原因是层叠上下文隔离和定位缺失：父元素触发新上下文（如opacity、transform）使z-index仅在局部生效，且z-*类仅对position非static元素起作用。
z-index在Tailwind里“写了等于没写”，根本不是数值配小了，而是你正在跟一个看不见的“结界”较劲——父元素悄悄创建了新的层叠上下文（stacking context），把你的z-50关进盒子里，只允许它跟盒子里的兄弟比高低。
为什么z-50设了也盖不住隔壁z-10？
因为它们压根不在同一个“世界”。CSS的z-index只在同一层叠上下文中生效。一旦某个祖先元素触发了新上下文（比如opacity: 0.99、transform: scale(1)、filter: blur(0)），它的所有后代就自动被隔离进独立层级空间。
- Chrome DevTools 的「Computed」面板里搜
stacking context，标为Yes的节点就是“结界入口” - 临时删掉父级的
opacity-95或scale-100，遮挡立刻消失 → 验证成功 - Tailwind 中
blur-sm、scale-95、opacity-90全部是隐形触发器，不是“动效工具”，是“层级牢笼”
position没设对，z-类直接被浏览器忽略
Tailwind 的 z-* 类只对已定位元素起作用。position: static（默认值）下，无论你写 z-[9999] 还是 z-modal-overlay，浏览器连解析都跳过。
- 动态插入的弹窗（如 toast）必须同步加
relative或fixed，不能只靠 JS 操作z-类 - Flex/Grid 容器里的子项，不会继承父容器的定位能力 —— 子元素自己得显式声明
position: relative -
position: sticky在滚动超出边界后会退化为relative，此时z-index行为可能突变，需实测
tailwind.config.js里zIndex配置不生效的三个硬伤
改完配置却没生成对应 CSS，大概率踩中以下任一坑：
- 写在
extend.zIndex里 → Tailwind v3+ 不识别，等于白写 - 用数组语法：
zIndex: ['0', '50', '999']→ 已废弃，规则根本不会生成 - 键名没加引号：
50: '50'→ JS 解析成数字键，可能导致构建时键丢失或顺序错乱
✅ 正确写法必须是：theme: { zIndex: { 'modal-overlay': '60', 'tooltip': '40' } }，且改完后手动重启 dev server —— JIT 模式不热重载配置变更。
z-[999]和动态拼接在生产环境大概率失效
React 中 class={`z-[${depth}]`} 或随意写 z-[2147483647]，看似灵活，实则危险：
- JIT 扫描依赖
content配置中的字面量字符串，动态拼接无法被静态分析 → 生产构建漏生成 - 第三方库（如 Headless UI）注入的 CSS 可能晚于你的 Tailwind 输出，导致
z-[999]被覆盖 - 没有语义，查问题时完全不知道
z-[999]对应哪个 UI 层级，协作和维护成本飙升
真正卡住人的从来不是数字够不够大，而是你没意识到：每个 position: relative 元素是否处在同一层叠上下文里。检查父级有没有无意中触发新上下文，比反复调大 z- 数字管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
