Tailwind CSS Height
This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS height property. This class is used to specify an element's height. Padding, margin, and element borders are not included in the height class.
CSS Height Classes
The classes based on height are as follows:
- h-0: The height is set to zero using this class.
- h-auto: This class automatically adjusts the height based on the content.
- h-px: This class is used to specify the height in one-pixel increments.
- h-1/2: This class reduces the window's height to half its original size.
- h-1/3: This class reduces the window's height to one-third of its original size.
- h-1/4: This class reduces the window's height to one-fourth of its original size.
- h-1/5: This class reduces the window's height to one-fifth of its original size.
- h-1/6: This class reduces the window's height to one-sixth of its original size.
- h-full: As long as the parent has a defined height, this class sets an element's height to 100% of its parent.
- h-screen: This class is used to make an element fill the viewport's entire height.
Note: You can adjust the number or set the percentage value by using the valid "rem" values.
h-0
This class is used to specify the height of any element. You can replace the number with a correct number of rem units to fix the element's height.
Syntax is:
<element class="h-0">...</element>
Example
Example is as follows:
<!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-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Height Class - Tailwind CSS</b> <div class="flex flex-wrap-reverse p-4 mx-12 space-x-4 h-64 bg-red-200"> <div class="h-8 w-12 bg-red-400 rounded-lg">h-8</div> <div class="h-12 w-12 bg-red-400 rounded-lg">h-12</div> <div class="h-16 w-12 bg-red-400 rounded-lg">h-16</div> <div class="h-20 w-12 bg-red-400 rounded-lg">h-20</div> <div class="h-24 w-12 bg-red-400 rounded-lg">h-24</div> <div class="h-32 w-12 bg-red-400 rounded-lg">h-32</div> <div class="h-40 w-12 bg-red-400 rounded-lg">h-40</div> <div class="h-48 w-12 bg-red-400 rounded-lg">h-48</div> <div class="h-52 w-12 bg-red-400 rounded-lg">h-52</div> </div> </body> </html>
Output:
h-auto
This class allows the browser to determine the element's height.
Syntax:
<element class="h-auto">...</element>
Example
Example is as follows:
<!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-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Height Class - Tailwind CSS </b> <div class="mx-48 bg-red-200 p-8"> <div class="h-auto bg-red-400 rounded-lg">h-auto</div> </div> </body> </html>
Output:
h-screen
This class is used to make an element fill the viewport's entire height.
Syntax is:
<element class="h-screen">...</element>
Example
Example is as follows:
<!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-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Height Class - Tailwind CSS </b> <div class="mx-48 bg-red-200 p-8"> <div class="h-screen bg-red-400 rounded-lg">h-screen</div> </div> </body> </html>
Output:
h-full
As long as the parent has a defined height, this class sets an element's height to 100% of its parent.
Syntax:
<element class="h-full">...</element>
Example
Example is as follows:
<!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-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Height Class - Tailwind CSS </b> <div class="mx-48 h-48 bg-red-200 p-8"> <div class="h-full bg-red-400 rounded-lg">h-full</div> </div> </body> </html>
Output:
