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. 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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full
h-12 bg-green-400"
style="top: 32px;">0</div>
<div class="relative z-10 w-full
h-12 bg-yellow-400">1</div>
<div class="relative z-20 w-full
h-12 bg-red-400">2</div>
<div class="relative z-30 w-full
h-12 bg-blue-400">3</div>
<div class="relative z-40 w-full
h-12 bg-green-300">4</div>
<div class="relative z-50 w-full
h-12 bg-orange-400">5</div>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full h-12 bg-green-400">0</div>
<div class="relative z-10 w-full
h-12 bg-yellow-400" style="top: 32px;">1</div>
<div class="relative z-20 w-full h-12 bg-red-400">2</div>
<div class="relative z-30 w-full h-12 bg-blue-400">3</div>
<div class="relative z-40 w-full h-12 bg-green-300">4</div>
<div class="relative z-50 w-full h-12 bg-orange-400">5</div>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full h-12 bg-green-400">0</div>
<div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
<div class="relative z-20 w-full h-12 bg-red-400"
style="top: 32px;">2</div>
<div class="relative z-30 w-full h-12 bg-blue-400">3</div>
<div class="relative z-40 w-full h-12 bg-green-300">4</div>
<div class="relative z-50 w-full h-12 bg-orange-400">5</div>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full h-12 bg-green-400">0</div>
<div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
<div class="relative z-20 w-full h-12 bg-red-400">2</div>
<div class="relative z-30 w-full h-12
bg-blue-400" style="top: 32px;">3</div>
<div class="relative z-40 w-full h-12 bg-green-300">4</div>
<div class="relative z-50 w-full h-12 bg-orange-400">5</div>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full h-12 bg-green-400">0</div>
<div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
<div class="relative z-20 w-full h-12 bg-red-400">2</div>
<div class="relative z-30 w-full h-12 bg-blue-400">3</div>
<div class="relative z-40 w-full h-12 bg-green-300"
style="top: 32px;">4</div>
<div class="relative z-50 w-full h-12 bg-orange-400">5</div>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Z-Index Class</b>
<div class="flex-column">
<div class="relative z-0 w-full h-12 bg-green-400">0</div>
<div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
<div class="relative z-20 w-full h-12 bg-red-400">2</div>
<div class="relative z-30 w-full h-12 bg-blue-400">3</div>
<div class="relative z-40 w-full h-12 bg-green-300">4</div>
<div class="relative z-50 w-full h-12 bg-orange-400"
style="top: 32px;">5</div>
</div>
</body>
</html>
Output:
