zindex 配置需在 theme.zindex 中用对象语法显式声明（如 {'999': '999'}），重启开发服务器生效；z-index 生效还依赖定位属性和层叠上下文，父元素需有 position 值且未意外创建新层叠上下文。
zIndex 配置里加数字没生效？检查是否在 theme.zIndex 下正确声明
Tailwind 的 zIndex 不是直接往配置里塞数字就行，它默认只认预设关键词（如 auto、0、10、50 等），你加的数值必须显式映射为类名才能生成对应 CSS。常见错误是直接写 { 999: '999' } 却没放在 theme.zIndex 对象里，或用了数组格式但 Tailwind v3.0+ 已不支持。
实操建议：
- 确保修改的是
tailwind.config.js中的theme.zIndex，不是extend.zIndex（除非你只想追加） - 用对象语法，键是类名后缀，值是 CSS
z-index值：{ '999': '999', 'max': '2147483647' } - 避免用纯数字键（如
999: '999'），部分 JS 环境会自动转成字符串但易混淆，统一用引号包裹更稳 - 改完必须重启 dev server，Tailwind 不会热重载配置变更
生成的类名是 z-999 还是 z-[999]？取决于你用的 Tailwind 版本和写法
v3.0+ 默认只生成你明确定义的键对应的类，比如配了 { '999': '999' }，就只生成 z-999；不会自动生成 z-[999] —— 那是 JIT 模式下的任意值语法，需额外开启 content 扫描或手动启用 experimental.optimizeUniversalDefaults（不推荐）。
实操建议：
- 要支持类似
z-[999]这种任意值，得靠content中实际出现该字符串，且开启 JIT（v3 默认开启），但依赖扫描，不可控 - 生产环境强烈建议走配置式：定义
z-999，然后在 HTML 中写class="z-999"，稳定可维护 - 如果必须动态 z-index（比如 React 中
z-[${depth}]），确认content数组包含对应模板路径，且值被静态分析到
为什么加了 z-999 但元素还是被盖住？优先看层叠上下文和定位
z-index 只在同一个层叠上下文内有效。常见陷阱是：父容器没定位（position 不是 relative/absolute/等），导致子元素的 z-999 完全无效；或者父级本身已创建了新的层叠上下文，把你的高 z-index “锁”在内部了。
实操建议：
- 用浏览器开发者工具检查目标元素的
computed position和z-index，确认它是否处于预期的层叠上下文中 - 给父容器加
relative或static（重置）来干预层叠上下文边界 - 避免在
opacity 、<code>transform、filter等属性上无意识创建新层叠上下文 - 真要全局最高，用
z-max（配'2147483647'）比猜999更可靠
自定义 zIndex 影响打包体积吗？会影响，但通常可忽略
每个新增的 z- 类都会生成一条 CSS 规则，比如 .z-999 { z-index: 999; }。Tailwind 默认只生成用到的类，所以只要你没在 content 里写 z-999，即使配置里有也不会打进 CSS。
实操建议：
- 别为了“以后可能用”提前配一堆 z 值，按需添加
- 如果项目中大量使用相近层级（如弹窗统一
z-50、z-60），建议抽象成语义化类名（z-overlay、z-toast），再通过theme.zIndex映射，提升可读性 - 注意 PurgeCSS / content pruning 是否覆盖全部模板，漏扫会导致类缺失
zIndex 配置看着简单，真正卡住人的往往不是怎么写，而是层叠上下文的隐式创建和类名是否被实际扫描到 —— 这两点不盯住，配再多个数字都没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
