Tailwind CSS Z-index

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-indexproperty. This class is used to describe the z-index along the three-dimensional plane, as given in the below examples.

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>

Example:

Output: 

 z-10: It is used to give the z-index 10 to the element. The elements appear 10px upside along the z-axis.

Syntax:

<element class="z-10">....</element>

Example:

Output: 

z-20: It is used to give the z-index 20 to the element. The elements appear 20px upside along the z-axis.

Syntax:

<element class="z-20">....</element>

Example:

Output:

z-30: It is used to give the z-index 30 to the element. The elements appear 30px upside along the z-axis.

Syntax:

<element class="z-30">....</element>

Example:

Output:

 z-40: It is used to give the z-index 40 to the element. The elements appear 40px upside along the z-axis.

Syntax:

<element class="z-40">....</element>

Example:

Output:

 z-50: It is used to give the z-index 50 to the element. The elements appear 50px upside along the z-axis.

Syntax:

<element class="z-50">....</element>

Example:

Output: