Tailwind CSS - Min-Height

Previous
Quiz
Next

Tailwind CSS min-height is a utility class that provides an effective way of handling the content min-height. This is used to set the min-height or manipulate the min-height of any HTML elements.

Tailwind CSS Min-Height Classes

The following is the list of Tailwind CSS min-height classes that provide an effective way of handling content min-height.

Class CSS Properties
min-h-0 min-height: 0px;
min-h-1 min-height: 0.25rem; /* 4px */
min-h-2 min-height: 0.5rem; /* 8px */
min-h-3 min-height: 0.75rem; /* 12px */
min-h-4 min-height: 1rem; /* 16px */
min-h-5 min-height: 1.25rem; /* 20px */
min-h-6 min-height: 1.5rem; /* 24px */
min-h-7 min-height: 1.75rem; /* 28px */
min-h-8 min-height: 2rem; /* 32px */
min-h-9 min-height: 2.25rem; /* 36px */
min-h-10 min-height: 2.5rem; /* 40px */
min-h-11 min-height: 2.75rem; /* 44px */
min-h-12 min-height: 3rem; /* 48px */
min-h-14 min-height: 3.5rem; /* 56px */
min-h-16 min-height: 4rem; /* 64px */
min-h-20 min-height: 5rem; /* 80px */
min-h-24 min-height: 6rem; /* 96px */
min-h-28 min-height: 7rem; /* 112px */
min-h-32 min-height: 8rem; /* 128px */
min-h-36 min-height: 9rem; /* 144px */
min-h-40 min-height: 10rem; /* 160px */
min-h-44 min-height: 11rem; /* 176px */
min-h-48 min-height: 12rem; /* 192px */
min-h-52 min-height: 13rem; /* 208px */
min-h-56 min-height: 14rem; /* 224px */
min-h-60 min-height: 15rem; /* 240px */
min-h-64 min-height: 16rem; /* 256px */
min-h-72 min-height: 18rem; /* 288px */
min-h-80 min-height: 20rem; /* 320px */
min-h-96 min-height: 24rem; /* 384px */
min-h-px min-height: 1px;
min-h-0.5 min-height: 0.125rem; /* 2px */
min-h-1.5 min-height: 0.375rem; /* 6px */
min-h-2.5 min-height: 0.625rem; /* 10px */
min-h-3.5 min-height: 0.875rem; /* 14px */
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-svh min-height: 100svh;
min-h-lvh min-height: 100lvh;
min-h-dvh min-height: 100dvh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;

Functionality of Tailwind CSS Min-Height Classes

  • min-h-*: This class is used to set a specific minimum height of any element, the * is representing a number that can be any acceptable value from the above table.
  • min-h-px: This class sets the minimum height of the element 1px.
  • min-h-auto: This class define the minimum height of the element based on the content.
  • min-h-1/2: This specifies the minimum height is set to half of the window.
  • min-h-1/3: This specifies the minimum height is set to one-third of the window.
  • min-h-1/4: This specifies the minimum height is set to one-fourth of the window.
  • min-h-1/5: This specifies the minimum height is set to one-fifth of the window.
  • min-h-1/6: This specifies the minimum height is set to one-sixth of the window.
  • min-h-full: This class sets the minimum height at it's full potential.
  • min-h-screen: This specifies the minimum height is set to the screen size.
  • min-h-svh: This class sets the minimum height of the element 100 svw.
  • min-h-lvh: This class sets the minimum height of the element 100 lvh.
  • min-h-dvh: This class sets the minimum height of the element 100 dvh
  • min-h-min: This class is used to specify the min-height at minimum capacity.
  • min-h-max: This class is used to specify the min-height at maximum capacity.
  • min-h-fit: This class sets the minimum height to fit the content into the parent.

Tailwind CSS Minimum Height Class Examples

The following examples will illustrate the Tailwind CSS Minimum Height class utility.

Setting Minimum Height

We have used the CSS minimum-height property so many times, as here we can achieve that by using the mentioned classes as well.

Example

Here in this example, we will create four elements and set different minimum heights by using the above-mentioned classes.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Minimum Height Class
    </h2>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit "> 
            <div class="min-h-full w-20 bg-green-400">
                min-h-full
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-8 w-20 bg-green-400">
                min-h-8
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-24 w-20 bg-green-400">
                min-h-24
            </div> 
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-48 w-20 bg-green-400">
                min-h-48
            </div> 
        </div>
    </div>
</body>

</html>

Conditional Minimum Height

We can change the minimum height value based on conditions like hover, focus, or screen size. To set a condition on any element's minimum height, we can use `hover` and `focus` classes.

Example

In the following example, we will change the minimum height value when hovering over the element.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Minimum Height Class
    </h2>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit "> 
            <div class="min-h-full w-20 bg-green-400">
                min-h-full
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-8 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-24 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-48 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements