Z-Index

Controls the element’s stack order.

Class	Property
zi-0	z-index: 0;
zi-10	z-index: 10;
zi-20	z-index: 20;
zi-30	z-index: 30;
zi-40	z-index: 40;
zi-50	z-index: 50;
zi-60	z-index: 60;
zi-70	z-index: 70;
zi-80	z-index: 80;
zi-90	z-index: 90;
zi-auto	z-index: auto;

---

Using responsive modifiers

Using responsive breakpoints like sm:zi-*, md:zi-*, lg:zi-*, and xxl:zi-* allows targeting specific utilities in different viewports.

<div class="zi-10 md:zi-20 ..."></div>

Using hover modifiers

Using :hover modifiers such as h:zi-* allows you to override elements and change their values when hovering over them.

<div class="zi-10 h:zi-20 ..."></div>