Utilities for controlling the stack order of an element.
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.
<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>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.
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.
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:
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: