Tailwind的z-*类默认不按数值顺序生效，因其离散值易被第三方插件或自定义配置打破全局单调性，导致层级混乱；应通过theme.zIndex集中配置语义化层级（如z-background、z-modal-content），统一管理并避免冲突。
为什么Tail
win
d的
类默认不按数值顺序生效
Tailwind 默认的
工具类（如
、
、
）在 CSS 中生成的是离散值，但它们**不保证全局单调递增**——比如
可能被定义为
，而第三方插件或自定义配置里加了个
对应
，这时层级就跳出了原有序列。更常见的是：不同组件库、Modal、Toast、Tooltip 各自维护一套
命名，互相覆盖时完全不可预测。
如何用
建立可扩展的统一索引表
核心是放弃零散声明，改用 Tailwind 的
配置集中管理所有层级语义值。这不是“加更多数字”，而是按 UI 职责分层：
→ 底层容器（
）
→ 内容区域（
）
→ 固定头部/底部（
）
→ 下拉菜单、Popover（
）
→ Tooltip（
）
→ Toast / Snackbar（
）
→ Modal 背景遮罩（
）
→ Modal 主体（
）
→ 全局加载层（
）
→ 全屏编辑器浮层等（
）
在
中这样写：
之后直接用
、
，语义清晰，且天然避免冲突。
立即学习
“
前端免费学习笔记（深入）
”；
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
遇到第三方组件（如 Headless UI、Radix）覆盖怎么办
这些库常自带内联
或硬编码样式，比如 Headless UI 的
默认
，但你的
是
，它仍可能被压住——因为它的样式在 Tailwind 之后注入，或用了
。
优先查该组件文档是否支持
覆盖（如 Radix 的
组件允许传
）
若不行，在
中重写其选择器，并显式指定
等语义类
极端情况需用
（Tailwind 3.3+ 支持），但这是妥协，不是设计
永远不要在项目里再出现
或
—— 这等于主动放弃标准
为什么不用纯数字而要语义化命名
数字本身没有上下文。当某天产品提需求：“Toast 要盖过 Modal”，你改
从
到
，整个系统立刻崩：所有依赖原顺序的交互（比如 Modal 里的下拉菜单）都会错位。而语义化命名强制你思考层级意图：
和
是并列还是包含？要不要新增一个
？这种讨论会暴露设计盲区。
真正难的不是写对数字，而是让团队所有人对“浮层谁该在谁上面”有一致认知。配置表只是载体，共识才是关键。
z-*z-indexz-0z-10z-50z-50z-index: 50z-drawerz-index: 9999z-theme.zIndextheme.zIndexz-0backgroundz-10contentz-20stickyz-30dropdownz-40tooltipz-50toastz-60modal-overlayz-70modal-contentz-80loading-overlayz-90editor-overlaytailwind.config.jsmodule.exports = {
theme: {
extend: {
zIndex: {
'background': '0',
'content': '10',
'sticky': '20',
'dropdown': '30',
'tooltip': '40',
'toast': '50',
'modal-overlay': '60',
'modal-content': '70',
'loading-overlay': '80',
'editor-overlay': '90',
}
}
}
}z-backgroundz-modal-contentz-indexMenu.Itemsz-10z-dropdown30!importantclassportalclassName@layer componentsz-dropdown!z-dropdownz-[999]z-[10000]z-toast5075z-toastz-modal-contentz-global-toast