Произвольное значение z-индекса попутного ветра не работает

Я пытаюсь использовать z-индекс Tailwind с произвольным значением в соответствии с документацией , но похоже, что CSS не генерируется (см. прикрепленный скриншот).

Хотя я использую его с React в проекте, я пытался использовать z-index с произвольными значениями в простом HTML, чтобы убедиться, что он вообще работает. Но это не так.

Например. Я хочу отобразить 5 полей: 1-е должно быть самым верхним, а 5-е — самым нижним, используя z-индекс с произвольными значениями. Пример 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