Tailwind CSS Min-Height

Last Updated : 23 Jul, 2025

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 Min-Height Property. This class is used to set the minimum height of an element. The min-height class is used when the content of the element is smaller than the min-height and if the content is larger than the min-height, it has no effect. This class ensures that the value of the height class is not less than the specified min-height value of the element in consideration.

Min-Height classes:

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

min-h-0: This class is used to set the minimum specific height for any element.

Syntax:

<element class="min-h-0">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/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 Min-Height Class</b> 
    <div class="mx-48 bg-green-200 p-8">
        <div class="min-h-0 bg-green-400 
                    rounded-lg">min-h-0</div>
    </div>
</body> 

</html>

Output:

min-h-full: This class is used to set the minimum height of an element that is full, depending on the parent element.

Syntax:

<element class="min-h-full">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/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 Min-Height Class</b> 
    <div class="mx-48 h-48 bg-green-200 p-8">
        <div class="min-h-full bg-green-400 
                    rounded-lg">
          	min-h-full
        </div>
    </div>
</body> 

</html>

Output:

min-h-screen: This class is used to make an element span the entire height of the viewport minimum.

Syntax:

<element class="min-h-screen">...</element>

Example:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@1.9.6/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 Min-Height Class</b> 
    <div class="mx-48 bg-green-200 p-8">
        <div class="min-h-screen bg-green-400 
                    rounded-lg">min-h-screen</div>
    </div>
</body> 

</html>

Output:

Comment

Explore