The tailwind CSS is a utility CSS framework that provides classes the manage our HTML content in the use of CSS. The tailwind CSS makes our designing part easier and responsive for multiple platforms.The z-Index utility is for controlling the stack order of an element. It is the alternative to the CSS z-index property.
Utilities for controlling the stack order of an element.
Tailwind CSS Z-index
| Class | Properties |
|---|---|
| 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; |
Tailwind CSS z-index classes:
- z-0
- z-10
- z-20
- z-30
- z-40
- z-50
- z-auto
Note: In the above class, z-0 is equivalent to z-index:0 CSS property and so on.
z-0: It is used to give the z-index 0 to the element.
Syntax:
<element class="z-0">....</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.
