This class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS height Property. This class is used to set the height of an element. The height class does not contain padding, margin, and the border of elements.
Height classes:
- h-0: This class sets the height to zero.
- h-auto: This class sets the height according to the content.
- h-px: This class is used to set the height in 1px fix.
- h-1/2: This class sets the height to half of the window.
- h-1/3: This class sets the height to one-third of the window.
- h-1/4: This class sets the height to one-fourth of the window.
- h-1/5: This class sets the height to one-fifth of the window.
- h-1/6: This class sets the height to one-sixth of the window.
- h-full: This class sets an element’s height to 100% of its parent, as long as the parent has a defined height.
- h-screen: This class used to make an element span the entire height of the viewport.
Note: You can change the number with the valid “rem” values or set the percentage value.
h-0: This class is used to set the specific height for any element, you can change the number with a valid number of rem units to fix the height of the element.
Syntax:
<element class="h-0">...</element>
Example:
<!DOCTYPE html> <head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="flex flex-wrap-reverse p-4 mx-12
space-x-4 h-64 bg-green-200">
<div class="h-8 w-12 bg-green-400
rounded-lg">h-8</div>
<div class="h-12 w-12 bg-green-400
rounded-lg">h-12</div>
<div class="h-16 w-12 bg-green-400
rounded-lg">h-16</div>
<div class="h-20 w-12 bg-green-400
rounded-lg">h-20</div>
<div class="h-24 w-12 bg-green-400
rounded-lg">h-24</div>
<div class="h-32 w-12 bg-green-400
rounded-lg">h-32</div>
<div class="h-40 w-12 bg-green-400
rounded-lg">h-40</div>
<div class="h-48 w-12 bg-green-400
rounded-lg">h-48</div>
<div class="h-52 w-12 bg-green-400
rounded-lg">h-52</div>
</div>
</body>
</html>
|
Output:
h-auto: This class is used to let the browser determine the height of the element.
Syntax:
<element class="h-auto">...</element>
Example:
<!DOCTYPE html> <head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 bg-green-200 p-8">
<div class="h-auto bg-green-400
rounded-lg">h-auto</div>
</div>
</body>
</html>
|
Output:
h-screen: This class is used to make an element span the entire height of the viewport.
Syntax:
<element class="h-screen">...</element>
Example:
<!DOCTYPE html> <head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 bg-green-200 p-8">
<div class="h-screen bg-green-400
rounded-lg">h-screen</div>
</div>
</body>
</html>
|
Output:
h-full: This class is used to set an element’s height to 100% of its parent, as long as the parent has a defined height.
Syntax:
<element class="h-full">...</element>
Example:
<!DOCTYPE html> <head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Height Class</b>
<div class="mx-48 h-48 bg-green-200 p-8">
<div class="h-full bg-green-400
rounded-lg">h-full</div>
</div>
</body>
</html>
|
Output: