Z-Index

Utilities for controlling the stack order of an element.

Class reference

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.

1. <div class="z-40 ml-0 mt-0 bg-gray-400">z-40</div>
2. <div class="z-30 ml-2 mt-2 bg-gray-500">z-30</div>
3. <div class="z-20 ml-4 mt-4 bg-gray-600">z-20</div>
4. <div class="z-10 ml-6 mt-6 bg-gray-700">z-10</div>
5. <div class="z-0 ml-8 mt-8 bg-gray-800">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.

all

sm

md

lg

xl

1. <div class="z-0 sm:z-10 md:z-20 lg:z-30 xl:z-40 bg-yellow-400">yellow</div>
2. <div class="z-40 ml-4 mt-0 bg-gray-400">z-40</div>
3. <div class="z-30 ml-6 mt-2 bg-gray-500">z-30</div>
4. <div class="z-20 ml-8 mt-4 bg-gray-600">z-20</div>
5. <div class="z-10 ml-10 mt-6 bg-gray-700">z-10</div>
6. <div class="z-0 ml-12 mt-8 bg-gray-800">z-0</div>

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 theme.zIndex section of your Tailwind config.

1. // tailwind.config.js
2. module.exports = {
3. theme: {
4. zIndex: {
5. '0': 0,
6. -       '10': 10,
7. -       '20': 20,
8. -       '30': 30,
9. -       '40': 40,
10. -       '50': 50,
11. +       '25': 25,
12. +       '50': 50,
13. +       '75': 75,
14. +       '100': 100,
15. 'auto': 'auto',
16. }
17. }
18. }

Negative values

If you’d like to add any negative z-index classes that take the same form as Tailwind’s negative margin classes, prefix the keys in your config file with a dash:

1. // tailwind.config.js
2. module.exports = {
3. theme: {
4. extend: {
5. zIndex: {
6. +         '-10': '-10',
7. }
8. }
9. }
10. }

Tailwind is smart enough to generate classes like -z-10 when it sees the leading dash, not z--10 like you might expect.

Responsive and pseudo-class 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 variants section of your tailwind.config.js file.

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

1. // tailwind.config.js
2. module.exports = {
3. variants: {
4. // ...
5. -     zIndex: ['responsive'],
6. +     zIndex: ['responsive', 'hover', 'focus'],
7. }
8. }

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 corePlugins section of your config file:

1. // tailwind.config.js
2. module.exports = {
3. corePlugins: {
4. // ...
5. +     zIndex: false,
6. }
7. }

← Visibility   Flex Direction →