Tailwind CSS - Max-Height

Previous
Quiz
Next

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

Tailwind CSS Max-Height Classes

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

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

Functionality of Tailwind CSS Min-Height Classes

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

Tailwind CSS Maximum Height Class Examples

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

Setting Maximum Height

We have used the CSS maximum-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 three elements and set different maximum 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 Maximum Height Class
    </h2>
     <div class="flex">
        <div class="h-64 bg-green-200 p-2 
                    text-center w-fit "> 
            <div class="max-h-full w-60 p-1 
                        bg-green-400 text-justify">
                Here we set max-h-full class so the 
                maximum height can be the 100% 
                of the screen. This class set the 
                height of the element based on content.
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 
                    text-center w-fit"> 
            <div class="max-h-1 w-48 p-1 
                        bg-green-400">
                max-h-1
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 
                    text-center w-fit"> 
            <div class="max-h-16 w-48 p-1 
                        bg-green-400">
                max-h-16
            </div> 
        </div> 
</body>

</html>

Conditional Maximum Height

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

Example

In the following example, we will change the maximum 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 Maximum Height Class
    </h2>
     <div class="flex">
        <div class="h-64 bg-green-200 p-2 
                    text-center w-fit "> 
            <div class="max-h-full hover:max-h-8 w-60 p-1 
                        bg-green-400 text-justify">
                Here we set max-h-full class so the 
                maximum height can be the 100% 
                of the screen. This class set the 
                height of the element based on content.
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 
                    text-center w-fit"> 
            <div class="max-h-16 w-48 p-1 
                        bg-green-400">
                max-h-16
            </div> 
        </div> 
</body>

</html>
Print Page
Previous
Next