Quick reference

max-h-0max-height: 0px;
max-h-pxmax-height: 1px;
max-h-0.5max-height: 0.125rem;
max-h-1max-height: 0.25rem;
max-h-1.5max-height: 0.375rem;
max-h-2max-height: 0.5rem;
max-h-2.5max-height: 0.625rem;
max-h-3max-height: 0.75rem;
max-h-3.5max-height: 0.875rem;
max-h-4max-height: 1rem;
max-h-5max-height: 1.25rem;
max-h-6max-height: 1.5rem;
max-h-7max-height: 1.75rem;
max-h-8max-height: 2rem;
max-h-9max-height: 2.25rem;
max-h-10max-height: 2.5rem;
max-h-11max-height: 2.75rem;
max-h-12max-height: 3rem;
max-h-14max-height: 3.5rem;
max-h-16max-height: 4rem;
max-h-20max-height: 5rem;
max-h-24max-height: 6rem;
max-h-28max-height: 7rem;
max-h-32max-height: 8rem;
max-h-36max-height: 9rem;
max-h-40max-height: 10rem;
max-h-44max-height: 11rem;
max-h-48max-height: 12rem;
max-h-52max-height: 13rem;
max-h-56max-height: 14rem;
max-h-60max-height: 15rem;
max-h-64max-height: 16rem;
max-h-72max-height: 18rem;
max-h-80max-height: 20rem;
max-h-96max-height: 24rem;
max-h-fullmax-height: 100%;
max-h-screenmax-height: 100vh;
max-h-minmax-height: min-content;
max-h-maxmax-height: max-content;
max-h-fitmax-height: fit-content;

Basic usage

Setting the maximum height

Set the maximum height of an element using the max-h-full or max-h-screen utilities.

<div class="h-24 ...">
  <div class="h-48 max-h-full ...">
    <!-- ... -->

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:max-h-screen to only apply the max-h-screen utility on hover.

<div class="h-48 max-h-full hover:max-h-screen">
  <!-- ... -->

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:max-h-screen to apply the max-h-screen utility at only medium screen sizes and above.

<div class="h-48 max-h-full md:max-h-screen">
  <!-- ... -->

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind’s max-height scale uses a combination of the default spacing scale as well as some additional height related values.

You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

module.exports = {  theme: {    extend: {      spacing: {        '128': '32rem',      }    }  }}

Alternatively, you can customize just the max-height scale by editing theme.maxHeight or theme.extend.maxHeight in your tailwind.config.js file.

module.exports = {  theme: {    extend: {      maxHeight: {        '128': '32rem',      }    }  }}

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off max-height value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="max-h-[32rem]">
  <!-- ... -->

Learn more about arbitrary value support in the arbitrary values documentation.