Z-Index

Utilities for controlling the stack order of an element.

Class reference

Class	Properties
.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;

Usage

Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the .z-{index} utilities.

z-40

z-30

z-20

z-10

z-0

<div class="z-40 ml-0 mt-0 bg-grey-light">z-40</div>
<div class="z-30 ml-2 mt-2 bg-grey">z-30</div>
<div class="z-20 ml-4 mt-4 bg-grey-dark">z-20</div>
<div class="z-10 ml-6 mt-6 bg-grey-darker">z-10</div>
<div class="z-0 ml-8 mt-8 bg-grey-darkest">z-0</div>

Responsive

To control the z-index of an element at a specific breakpoint, add a {screen}: prefix to any existing z-index utility. For example, use md:z-50 to apply the z-50 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

yellow

z-40

z-30

z-20

z-10

z-0

Customizing

Z-Index Scale

By default Tailwind provides six numeric z-index utilities and an auto utility. You change, add, or remove these by editing the zIndex section of your Tailwind config.

{

// ...

zIndex: {

'0': 0,

- '10': 10,

- '20': 20,

- '30': 30,

- '40': 40,

- '50': 50,

+ '25': 25,

+ '50': 50,

+ '75': 75,

+ '100': 100,

'auto': 'auto',

}

Responsive and State Variants

By default, only responsive variants are generated for z-index utilities.

You can control which variants are generated for the z-index utilities by modifying the zIndex property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{

// ...

modules: {

// ...

- zIndex: ['responsive'],

+ zIndex: ['responsive', 'hover', 'focus', 'active', 'group-hover'],

}

Disabling

If you don't plan to use the z-index utilities in your project, you can disable them entirely by setting the zIndex property to false in the modules section of your config file:

{

// ...

modules: {

// ...

- zIndex: ['responsive'],

+ zIndex: false,

}