Max-Height
Utilities for setting the maximum height of an element.
Quick reference
Class
|
Properties
|
---|---|
max-h-0 | max-height: 0px; |
max-h-px | max-height: 1px; |
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-full | max-height: 100%; |
max-h-screen | max-height: 100vh; |
max-h-min | max-height: min-content; |
max-h-max | max-height: max-content; |
max-h-fit | max-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 ..."> <!-- ... --> </div> </div>
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"> <!-- ... --> </div>
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"> <!-- ... --> </div>
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]"> <!-- ... --> </div>
Learn more about arbitrary value support in the arbitrary values documentation.
© 2022 Tailwind Labs Inc.
https://tailwindcss.com/docs/max-height