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:
