Tailwind z-index 任意值不起作用

Question

我正在尝试按照文档使用具有任意值的Tailwind z-index，但看起来CSS没有生成（请参阅随附的屏幕截图）。

虽然我在项目中将它与 React 一起使用，但我尝试在纯 HTML 中使用具有任意值的 z-index 以确保它能够正常工作。但事实并非如此。

例如我想使用具有任意值的 z-index 显示 5 个框，第一个应该是最上面的，第五个应该是最下面的。 CodePen 示例 和下面的 HTML 代码不起作用。在同一个 CodePen 中，您可以看到使用 z-10、z-20... 等正在工作。

<div class="flex justify-center items-center w-20 h-20 shadow-lg relative bg-red-300 z-[5]">1</div>
<div class="flex justify-center items-center w-20 h-20 shadow-lg relative bg-purple-200 -top-3 left-3 z-[4]">2</div>
<div class="flex justify-center items-center w-20 h-20 shadow-lg relative bg-green-200 -top-6 left-6 z-[3]">3</div>
<div class="flex justify-center items-center w-20 h-20 shadow-lg relative bg-blue-200 -top-9 left-9 z-[2]">4</div>
<div class="flex justify-center items-center w-20 h-20 shadow-lg relative bg-yellow-200 -top-12 left-12 z-[1]">5</div>

我使用的项目的

tailwind.config.js

文件：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.js'],
  darkMode: 'media',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        indy: {
          50: '#e0d3ef',
          100: '#c4b7d4',
          200: '#a99cb8',
          300: '#8d809d',
          400: '#726482',
          500: '#564867',
          600: '#3b2d4b',
          700: '#1f1130',
          800: '#1a0f29',
          900: '#150c21'
        },
        error: {
          DEFAULT: '#FF0055',
          50: '#FFB8CF',
          100: '#FFA3C2',
          200: '#FF7AA7',
          300: '#FF528B',
          400: '#FF2970',
          500: '#FF0055',
          600: '#C70042',
          700: '#8F0030',
          800: '#57001D',
          900: '#1F000A'
        },
        success: {
          DEFAULT: '#22CF6B',
          50: '#B6F3D0',
          100: '#A4F0C4',
          200: '#81EAAD',
          300: '#5EE597',
          400: '#3BDF80',
          500: '#22CF6B',
          600: '#1A9F52',
          700: '#126F39',
          800: '#0A3E20',
          900: '#020E07'
        }
      }
    }
  },
  variants: {
    extend: {
      opacity: ['disabled']
    }
  },
  plugins: [require('@tailwindcss/forms')]
}

编辑：

1. CodePen 中的示例由于 Tailwind v2 不支持任意值而无法工作。

2. 在我的示例中，我需要为行列表中的每个项目自定义 z 索引，因为每个项目都有一个下拉列表，打开时会显示在列表下方。因此，要生成任意值的 z-index 值，我使用以下代码：

const containerClasses = `relative inline-block text-left left-[-75px] z-[${itemsLength - index}]`
// itemsLength is the length of items in an array
// index is the index of each item

Answer 1

您正在尝试生成动态类名：

`z-[${itemsLength - index}]`

这不起作用，因为 Tailwind 实际上并不评估您的源代码。 Tailwind 不知道

z-[${itemsLength - index}]

会变成

z-[1], z-[2]

等等（这段代码是在 React 中编译的）。

Tailwind 只能检测静态完整的类字符串，这意味着您的类需要作为完整字符串存在，Tailwind 才能正确检测它们。

错了：

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

正确：

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

现在，一个可能的解决方案是使用 safelist 选项来“

safelist

”某些类（Tailwind 将生成内容文件中不存在的某些类名称）：

safelist: [
    'z-[1]',
    'z-[2]',
    ...
  ]

但我不知道它是否适合您，因为项目数量可能会变化。

我的建议是：

• 将顺序反转到

  items

  数组中（在 DOM 中，第一项将是最后一个元素）
• 在父级上使用

  display: flex; flex-direction: column-reverse;

  （在 Tailwind 中为

  flex flex-col-reverse

  ）。 这样，你就不再需要 z-index 了。

https://play.tailwindcss.com/2JjQSwBYlB

Tailwind 文档中的更多信息：

• 深入进行类别检测
• 动态类名
• 将课程列入安全名单

Answer 2

问题出在您使用的 Tailwind 版本上。您引用的文档是 v3.2.4，但您的 codepen 示例使用 v2：https://v2.tailwindcss.com/docs/z-index

将您的 Tailwind 版本升级到 v3.2.4 并重试。

这是您使用 v3.2.4 的代码https://play.tailwindcss.com/L1hP3hoeHY

Answer 3

另一种快速方法是直接使用

style property

。

在样式属性内，您可以设置动态值。

例如在React中：

<span
    className={`top-0 left-0 absolute`}
    style={{
    zIndex: elements.length - i,
    }}
    >
</span>