Tailwind z-index arbitrary value is not working

Question

I'm trying to use Tailwind's z-index with arbitrary value as per documentation , but it looks like the CSS is not generating (see attached screenshot).

Although I use it with React in the project, I've tried using z-index with arbitrary values in plain HTML to make sure it's even working. But it's doesn't.

Eg I want to display 5 boxes 1st one should be the topmost and the 5th bottommost using z-index with arbitrary values. CodePen example and HTML code below that is not working. In the same CodePen you can see that using z-10, z-20, ... and so on is working.

<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>

The tailwind.config.js file for the project I use:

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')]
}

EDIT :

1. The example in the CodePen was not working due to a Tailwind v2, that didn't support arbitrary values.

2. In my example I need a custom z-index for each item in a list of rows, because each one of these items has a dropdown that when opened appears below the list. So to generate the z-index value for the arbitrary value I use the following code:

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

You are trying to generate dynamic class names:

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

which won't work because Tailwind doesn't actually evaluate your source code. Tailwind does not know that z-[${itemsLength - index}] will become z-[1], z-[2] etc. (this code is compiled in React).

Tailwind can only detect static unbroken class strings, which means that your classes need to exist as complete strings for Tailwind to detect them correctly.

wrong :

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

correct :

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

Now, a possible solution would be to " safelist " some classes (Tailwind will generate certain class names that don't exist in your content files), by using safelist option:

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

but I don't know if it suits you, since the number of items might be variable.

My suggestion is to:

• reverse the order into the items array (in DOM, the first item will be the last element)
• use display: flex; flex-direction: column-reverse; display: flex; flex-direction: column-reverse; (in Tailwind, flex flex-col-reverse ) on the parent. In this way, you don't need z-index anymore.

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

More info in Tailwind Docs:

• Class detection in-depth
• Dynamic class names
• Safelisting classes

Answer 2

The problem is the Tailwind version you are using. The documentation you are making reference is v3.2.4 but your codepen example uses v2: https://v2.tailwindcss.com/docs/z-index

Upgrade your tailwind version to v3.2.4 and try again.

This is your code using v3.2.4 https://play.tailwindcss.com/L1hP3hoeHY