Tailwind CSS - Height

Previous
Quiz
Next

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

Tailwind CSS Height Classes

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

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

Functionality of Tailwind CSS Height Classes

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

Tailwind CSS Height Class Examples

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

Define Fixed Height

To define a fixed height, we can use classes like 'h-px', 'h-1', and 'h-24' classes. Any valid numeric value(h-*) can be used from the above table to create a fixed height element.

Example

Here in this example, we will create multiple elements and set different fixed heights on each 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 Height Class
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-4 
                h-auto w-80 bg-green-100 text-center">
        <div class="h-8 w-12 bg-green-400">h-8</div>
        <div class="h-16 w-12 bg-green-400">h-16</div> 
        <div class="h-24 w-12 bg-green-400">h-24</div> 
        <div class="h-32 w-12 bg-green-400">h-32</div> 
        <div class="h-40 w-12 bg-green-400">h-40</div> 
    </div>
</body>

</html>

Set Full Height

To set the full height of any element, you need to use the 'h-full' class on that element. Setting full height means it will take the space that content is required.

Example

In this example, we have created two elements. In the first element we will set the height 'h-24', but on hover it will expand to full height based on the parent element. In the second element, we will set the full height initially.

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

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Height Class
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-12 
                    h-60 w-40 bg-green-100 text-center">
        <div class="h-24 hover:h-full w-12 bg-green-400">
            h-24
        </div>
        <div class="h-full w-12 bg-green-400">
            h-full
        </div>
    </div>
</body>

</html>

Dynamic Viewport Height

Viewport height takes up the space of the live viewport height; if you scroll down, then it will automatically increase the height of that element. By using the tailwind 'h-dvh' class, you can create that. In similar manner, you can create large viewport and small viewport using 'h-lvh' and 'h-svh' classes.

Example

In this example, we will create an element with a dynamic viewport height facility.

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

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Height Class
    </h2>
    <div class="h-44 overflow-scroll flex 
                space-x-4 text-center">
        <div class="h-dvh w-40 bg-green-400">
            Dynamic Viewport Height
        </div>
        <div class="w-40 bg-green-400">
            Without Dynamic Viewport Height
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next