Tailwind CSS - Min-Height

The min-height class in Tailwind CSS sets the minimum height of an element. It is helpful when you want to ensure that an element has a minimum height regardless of the content inside it.

Syntax

The min-height class can be used in the following syntax:

<div class="min-h-{size}">
  <!-- Content here -->
</div>

Here, {size} can be one of the following:

• 0 - 0px
• full - 100%
• screen - 100vh

You can also use the sizing options available in Tailwind CSS to set a custom value for the min-height property.

<div class="min-h-24">
  <!-- Content here -->
</div>

Example

Here's an example that demonstrates the usage of the min-height class in Tailwind CSS.

<div class="flex flex-col min-h-screen">
  <header class="bg-gray-800 text-white py-4">
    <h1 class="text-3xl font-bold">Min-Height Example</h1>
  </header>
  
  <main class="flex-grow bg-gray-200">
    <p class="py-8 px-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </main>
  
  <footer class="bg-gray-800 text-white py-4">
    <p>Footer content here</p>
  </footer>
</div>

Output

The above example will produce the following output:

Explanation

In the above example, we have used the min-h-screen class on the parent container element to ensure that it always takes up the full height of the viewport.

Additionally, we have used the flex-grow class on the main tag to ensure that it takes up any remaining height that is not used by the header and footer elements.

Use

Use the min-height class in Tailwind CSS to set the minimum height of an element.

You can use this class on any element where you want to ensure that it has a minimum height regardless of the content inside it.

Important Points

• The min-height class in Tailwind CSS sets the minimum height of an element.
• You can use the sizing options available in Tailwind CSS to set a custom value for the min-height property.
• Use the min-height class on any element where you want to ensure that it has a minimum height regardless of the content inside it.

Summary

In this tutorial, we learned how to use the min-height class in Tailwind CSS to set the minimum height of an element. We also saw some examples and scenarios where this class can be used to achieve the desired layout.