Tailwind CSS Max-Height
The max-height
utility class in Tailwind CSS allows you to control the maximum height of elements. It provides a set of classes that enable you to set the Tailwind max height to specific values, percentages, or use predefined max-height utilities for common use cases.
Setting Tailwind Max Height
To set the Tailwind maximum height of an element, you can use the max-h-{size}
class, where {size} can be one of the following options:
max-h-{value}
: This sets the maximum height to a specific value in pixels.max-h-screen
: This sets the maximum height to the full height of the viewport.max-h-full
: This sets the maximum height to 100% of the parent container.max-h-0
: This sets the maximum height to 0, effectively hiding the element.
Here's an example of how to use the Tailwind max height utility classes:
<div class="max-h-64"> This div has a maximum height of 64 pixels.</div>
Preview
Percentage-based Tailwind Max Height
Tailwind CSS also provides utility classes for setting maximum height as a percentage of the parent container's height. You can use the max-h-{percentage}
class to achieve this. Here's an example:
<div class="max-h-full"> This div has a maximum height of 100% of its parent container.</div>
Preview
Responsive Tailwind Max Height
Tailwind CSS allows you to control the maximum height of elements responsively at different breakpoints. To use responsive max-height
classes, you can append the breakpoint prefix to the max-height
classes. For example, md:max-h-48
sets the maximum height to 48 pixels starting from the medium breakpoint and above. Here's an example:
<div class="max-h-64 md:max-h-48"> This div has a maximum height of 64 pixels by default, and 48 pixels starting from the medium breakpoint.</div>
In the above example, the max-h-64
class is applied by default, setting the tailwind max height to 64 pixels. However, starting from the medium breakpoint and above, the md:max-h-48
class is applied, changing the tailwind max height to 48 pixels.
Tailwind Max Height Table
Class | Properties |
---|---|
max-h-0 | max-height: 0px; |
max-h-0.5 | max-height: 0.125rem; |
max-h-1 | max-height: 0.25rem; |
max-h-1.5 | max-height: 0.375rem; |
max-h-2 | max-height: 0.5rem; |
max-h-2.5 | max-height: 0.625rem; |
max-h-3 | max-height: 0.75rem; |
max-h-3.5 | max-height: 0.875rem; |
max-h-4 | max-height: 1rem; |
max-h-5 | max-height: 1.25rem; |
max-h-6 | max-height: 1.5rem; |
max-h-7 | max-height: 1.75rem; |
max-h-8 | max-height: 2rem; |
max-h-9 | max-height: 2.25rem; |
max-h-10 | max-height: 2.5rem; |
max-h-11 | max-height: 2.75rem; |
max-h-12 | max-height: 3rem; |
max-h-14 | max-height: 3.5rem; |
max-h-16 | max-height: 4rem; |
max-h-20 | max-height: 5rem; |
max-h-24 | max-height: 6rem; |
max-h-28 | max-height: 7rem; |
max-h-32 | max-height: 8rem; |
max-h-36 | max-height: 9rem; |
max-h-40 | max-height: 10rem; |
max-h-44 | max-height: 11rem; |
max-h-48 | max-height: 12rem; |
max-h-52 | max-height: 13rem; |
max-h-56 | max-height: 14rem; |
max-h-60 | max-height: 15rem; |
max-h-64 | max-height: 16rem; |
max-h-72 | max-height: 18rem; |
max-h-80 | max-height: 20rem; |
max-h-96 | max-height: 24rem; |
max-h-px | max-height: 1px; |
max-h-full | max-height: 100%; |
max-h-screen | max-height: 100vh; |
Windframe Tailwind blocks
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.