Tailwind CSS z-index Utilities and Custom Scale

Tailwind CSS z-index System

Tailwind CSS provides a minimal set of z-index utilities by default, designed for simple layering needs. For complex applications, you will likely need to extend the scale.

Default Tailwind z-index Utilities

/* Default Tailwind z-index scale */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-auto { z-index: auto; }

Extending the Scale

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      zIndex: {
        '60': '60',
        '70': '70',
        '80': '80',
        '90': '90',
        '100': '100',
        'dropdown': '1000',
        'sticky': '1020',
        'overlay': '1040',
        'modal': '1050',
        'popover': '1060',
        'toast': '1080',
        'tooltip': '1090',
      }
    }
  }
}

This generates utilities like z-dropdown, z-modal, z-tooltip, etc.

Replacing the Default Scale

// tailwind.config.js — full replacement
module.exports = {
  theme: {
    zIndex: {
      'auto': 'auto',
      'base': '0',
      'raised': '1',
      'dropdown': '1000',
      'sticky': '1020',
      'overlay': '1040',
      'modal': '1050',
      'popover': '1060',
      'toast': '1080',
      'tooltip': '1090',
    }
  }
}

Using with Arbitrary Values

Tailwind also supports arbitrary z-index values:

<div class="z-[1050]">Modal content</div>
<div class="z-[9999]">Emergency override (not recommended)</div>

While convenient, arbitrary values defeat the purpose of a consistent scale. Prefer named utilities.

Negative z-index in Tailwind

<div class="-z-10">Behind the base layer</div>

Tailwind supports negative z-index values with the -z- prefix, useful for background decorative elements.

Best Practice

Design your z-index scale first using a tool like this one, then configure Tailwind's zIndex theme to match. This ensures consistency between your z-index system and the utility classes your team uses.