tailwind-cssz-index

Tailwind z-index arbitrary value is not working

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.

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

enter image description here

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
Solution

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

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

    More info in Tailwind Docs: