Tailwind CSS provides utility classes to easily control the stacking order of elements using z-index. With classes like z-0, z-10, z-20, z-30, and higher, you can define which elements appear above or below others. This is especially useful when working with overlapping components like modals, dropdowns, and tooltips. You can also customize z-index values in the tailwind.config.js file to match your project’s needs. Overall, it helps manage layering in a clean and predictable way without writing custom CSS.
Understanding Z-Index in Tailwind
Z-index controls the stacking order of elements along the z-axis (front to back). Elements with higher z-index appear above lower ones.
Example:
<div class=“relative”>
<div class=“absolute z-10 bg-blue-400 p-4”>Front</div>
<div class=“absolute z-0 bg-gray-400 p-4”>Back</div>
</div>
Using Tailwind Z-Index Utilities
Tailwind provides predefined classes like z-0, z-10, z-20, z-30, z-40, and z-50.
Example:
<div class=“relative”>
<div class=“absolute z-20 bg-red-400 p-4”>Higher</div>
<div class=“absolute z-10 bg-green-400 p-4”>Lower</div>
</div>
Positioning is Required
Z-index works only on positioned elements (relative, absolute, fixed, or sticky). Without positioning, z-index won’t apply.
Example:
<div class=”relative”>
<div class=”absolute z-50 bg-purple-400 p-4″>Visible on Top</div>
</div>
Negative Z-Index
Tailwind also allows negative stacking using classes like -z-10, which pushes elements behind others.
Example:
<div class=”relative”>
<div class=”-z-10 absolute bg-gray-300 p-4″>Behind</div>
<div class=”z-10 relative bg-white p-4″>Front Content</div>
</div>
Custom Z-Index Values
You can extend Tailwind’s config file to define custom z-index values for more control.
Example:
module.exports = {
theme: {
extend: {
zIndex: {
‘100’: ‘100’,
},
},
},
}
<div class=”relative”>
<div class=”absolute z-100 bg-blue-500 p-4″>
Custom Z-Index
</div>
</div>
