Tailwind CSS Min-Height

In tailwind CSS, 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 Min-Height Property. It is used to specify an element's minimum height. When the element's content is smaller than the min-height, the min-height class is utilized. This class ensures that the height class value does not go below the element in question's set min-height value.

Min-Height Classes

• min-h-0
• min-h-full
• min-h-screen

min-h-0

This class is used to specify the element's minimum specified height.

Syntax is:

<element class="min-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>Min-Height Class - Tailwind CSS</b>
    <div class="mx-48 bg-red-200 p-8">
        <div class="min-h-0 bg-red-400
                    rounded-lg">min-h-0</div>
    </div>
</body>
</html>

Output is:

min-h-full

This class is used to determine the minimum height of a complete element based on its parent element.

Syntax is:

<element class="min-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>Min-Height Class - Tailwind CSS </b>
    <div class="mx-48 h-48 bg-red-200 p-8">
        <div class="min-h-full bg-red-400
                    rounded-lg">min-h-full</div>
    </div>
</body>
</html>

Output is:

min-h-screen

This class is used to make an element span the viewport's entire height.

Syntax is:

<element class="min-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>Min-Height Class - Tailwind CSS </b>
    <div class="mx-48 bg-red-200 p-8">
        <div class="min-h-screen bg-red-400
                    rounded-lg">min-h-screen</div>
    </div>
</body>
</html>

Output is: