Tailwind Z-Index Classes to CSS

Tailwind Z-Index in CSS

Tailwind provides a fixed set of z-index values that follow a scale of 10s, making it easy to manage stacking order consistently across a project.

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;

Why Use a Scale?

Using a predefined scale prevents z-index wars — the common problem where developers keep increasing z-index values (999, 9999, 99999) because there is no agreed-upon system. Tailwind's 10-step scale provides enough room for layering:

z-index	Common Use
0	Default layer
10	Floating elements, relative-positioned children
20	Sticky headers, sticky sidebars
30	Dropdowns, tooltips
40	Modals, dialogs
50	Toasts, notifications (top of everything)

Arbitrary Values

In Tailwind v3+, you can use arbitrary values like z-[100] which generates z-index: 100. This converter supports numeric z-index classes in any value.

Stacking Contexts

Remember that z-index only works on positioned elements (anything except position: static). In Tailwind, you typically pair z-index with relative, absolute, fixed, or sticky.

Negative Z-Index

Tailwind supports negative z-index with -z-10, which generates z-index: -10. This is useful for placing background elements behind content.