Set the maximum height of an element using
max-h-*
utilities.
<
div
class
=
"
h-96
...
"
>
<
div
class
=
"
h-full
max-h-80
...
"
>
max-h-80
</
div
>
<
div
class
=
"
h-full
max-h-64
...
"
>
max-h-64
</
div
>
<
div
class
=
"
h-full
max-h-48
...
"
>
max-h-48
</
div
>
<
div
class
=
"
h-full
max-h-40
...
"
>
max-h-40
</
div
>
<
div
class
=
"
h-full
max-h-32
...
"
>
max-h-32
</
div
>
<
div
class
=
"
h-full
max-h-24
...
"
>
max-h-24
</
div
>
<
div
class
=
"
h-full
max-h-full
...
"
>
max-h-full
</
div
>
</
div
>
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.
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
.
By default, Tailwind’s maximum height scale is a combination of the
default spacing scale
as well as some additional values specific to heights.
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'
,
}
}
}
}
To customize
max-height
separately, use the
theme.minHeight
section of your
tailwind.config.js
file.
module
.
exports
=
{
theme
:
{
extend
:
{
maxHeight
:
{
'128'
:
'32rem'
,
}
}
}
}
Learn more about customizing the default theme in the
theme customization
documentation.
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-[220px]
"
>
</
div
>
Learn more about arbitrary value support in the
arbitrary values
documentation.