在使用 Tailwind 进行前端开发时，我们经常需要使用 z-index 属性来控制元素的层级关系。但是有时候，我们会发现在 Tailwind 中使用 z-index 属性无效，这是为什么呢？
问题原因
Tailwind 中的 z-index 属性是通过插件 zIndex 来实现的。该插件默认只提供了一些常用的 z-index 值，如 z-10，z-20 等。如果我们想使用其他的 z-index 值，就需要自己在配置文件中添加。例如，我们想使用 z-index 值为 999 的样式，需要在 tailwind.config.js 文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------ ----
--
--
--------- ---
-------- ---
-但是，即使我们添加了这个配置，也有可能出现 z-index 属性无效的情况。这是因为在 Tailwind 中，所有的样式都是通过组合 class 来实现的。如果一个元素同时应用了多个具有不同 z-index 值的 class，那么这个元素的 z-index 值会是哪一个呢？
实际上，这个元素的 z-index 值是由最后一个应用的具有 z-index 值的 class 决定的。例如，我们有一个元素应用了 z-10 和 z-20 两个 class，那么这个元素的 z-index 值将是 20，而不是 10。
解决方法
为了解决 Tailwind 中使用 z-index 属性无效的问题，我们可以采取以下两种方法：
方法一：使用 z-[value] 类名
除了提供一些常用的 z-index 值之外，Tailwind 还提供了一种特殊的类名 z-[value]，可以直接指定一个 z-index 值。例如，我们可以使用 z-999 类名来为元素设置 z-index 值为 999：
<div class="z-999">...</div>
这样就不需要在配置文件中添加新的 z-index 值了。
方法二：使用 z-index 属性
除了使用 Tailwind 提供的 z-index 类名之外，我们还可以直接使用 z-index 属性来设置元素的 z-index 值。例如：
<div style="z-index: 999;">...</div>
这种方法不需要在配置文件中添加任何东西，但是需要注意的是，使用内联样式不利于维护和复用，应该尽量避免使用。
总结
在 Tailwind 中使用 z-index 属性无效的问题，是由于多个具有不同 z-index 值的 class 的组合导致的。为了解决这个问题，我们可以使用 Tailwind 提供的 z-[value] 类名，也可以直接使用 z-index 属性。这些方法都可以有效地控制元素的层级关系，让我们在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66039915d10417a22200917d