Tailwind CSS Height

23 Mar, 2022
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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
Tailwind CSS
Tailwind-Sizing
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?