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: