max-height

max-h

Sets max-height via --max-h.

CSS Rules

.max-h {
  max-height: calc(var(--spacing) * var(--max-h));
}

Usage

<element class="max-h" style="--max-h: /* value */;" />

Responsive

Prefix .max-h utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h" style="--md-max-h: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h:hover" style="--max-h-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h::before" style="--max-h-before: /* value */;" />

<element class="content-after max-h::after" style="--max-h-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="max-h=value" />

<!-- Output -->
<element class="max-h" style="--max-h: value;" />

[max-h]

Caps height using raw --max-h. Useful for responsive size constraints.

CSS Rules

.\[max-h\] {
  max-height: var(--max-h);
}

Usage

<element class="[max-h]" style="--max-h: /* value */;" />

Responsive

Prefix .[max-h] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:[max-h]" style="--md-max-h: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="[max-h]:hover" style="--max-h-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="[max-h]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before [max-h]::before" style="--max-h-before: /* value */;" />

<element class="content-after [max-h]::after" style="--max-h-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="[max-h]=value" />

<!-- Output -->
<element class="[max-h]" style="--max-h: value;" />

max-h-none

Removes any max-height constraint by setting it to none.

CSS Rules

.max-h-none {
  max-height: none;
}

Usage

<element class="max-h-none" />

Responsive

Prefix .max-h-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-none::before" />

<element class="content-after max-h-none::after" />

max-h-full

Caps max-height at 100% of the containing block.

CSS Rules

.max-h-full {
  max-height: 100%;
}

Usage

<element class="max-h-full" />

Responsive

Prefix .max-h-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-full::before" />

<element class="content-after max-h-full::after" />

max-h-screen

Sets max-height: 100vh.

CSS Rules

.max-h-screen {
  max-height: 100vh;
}

Usage

<element class="max-h-screen" />

Responsive

Prefix .max-h-screen utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-screen" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-screen:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-screen:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-screen::before" />

<element class="content-after max-h-screen::after" />

max-h-dvh

Caps max-height at 100% of the dynamic viewport height (100dvh).

CSS Rules

.max-h-dvh {
  max-height: 100dvh;
}

Usage

<element class="max-h-dvh" />

Responsive

Prefix .max-h-dvh utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-dvh" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-dvh:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-dvh:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-dvh::before" />

<element class="content-after max-h-dvh::after" />

max-h-dvw

Caps max-height at 100% of the dynamic viewport width (100dvw).

CSS Rules

.max-h-dvw {
  max-height: 100dvw;
}

Usage

<element class="max-h-dvw" />

Responsive

Prefix .max-h-dvw utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-dvw" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-dvw:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-dvw:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-dvw::before" />

<element class="content-after max-h-dvw::after" />

max-h-lvh

Caps max-height at 100% of the large viewport height (100lvh).

CSS Rules

.max-h-lvh {
  max-height: 100lvh;
}

Usage

<element class="max-h-lvh" />

Responsive

Prefix .max-h-lvh utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-lvh" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-lvh:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-lvh:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-lvh::before" />

<element class="content-after max-h-lvh::after" />

max-h-lvw

Caps max-height at 100% of the large viewport width (100lvw).

CSS Rules

.max-h-lvw {
  max-height: 100lvw;
}

Usage

<element class="max-h-lvw" />

Responsive

Prefix .max-h-lvw utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-lvw" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-lvw:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-lvw:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-lvw::before" />

<element class="content-after max-h-lvw::after" />

max-h-svh

Caps max-height at 100% of the small viewport height (100svh).

CSS Rules

.max-h-svh {
  max-height: 100svh;
}

Usage

<element class="max-h-svh" />

Responsive

Prefix .max-h-svh utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-svh" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-svh:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-svh:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-svh::before" />

<element class="content-after max-h-svh::after" />

max-h-svw

Caps max-height at 100% of the small viewport width (100svw).

CSS Rules

.max-h-svw {
  max-height: 100svw;
}

Usage

<element class="max-h-svw" />

Responsive

Prefix .max-h-svw utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-svw" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-svw:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-svw:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-svw::before" />

<element class="content-after max-h-svw::after" />

max-h-min

Caps max-height at the intrinsic min-content size of the element.

CSS Rules

.max-h-min {
  max-height: min-content;
}

Usage

<element class="max-h-min" />

Responsive

Prefix .max-h-min utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-min" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-min:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-min:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-min::before" />

<element class="content-after max-h-min::after" />

max-h-max

Caps max-height at the intrinsic max-content size of the element.

CSS Rules

.max-h-max {
  max-height: max-content;
}

Usage

<element class="max-h-max" />

Responsive

Prefix .max-h-max utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-max" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-max:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-max:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-max::before" />

<element class="content-after max-h-max::after" />

max-h-fit

Caps max-height at fit-content, based on the element's content within constraints.

CSS Rules

.max-h-fit {
  max-height: fit-content;
}

Usage

<element class="max-h-fit" />

Responsive

Prefix .max-h-fit utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-fit" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-fit:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-fit:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-fit::before" />

<element class="content-after max-h-fit::after" />

max-h-lh

Caps max-height at one line-height unit (1lh).

CSS Rules

.max-h-lh {
  max-height: 1lh;
}

Usage

<element class="max-h-lh" />

Responsive

Prefix .max-h-lh utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:max-h-lh" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="max-h-lh:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="max-h-lh:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before max-h-lh::before" />

<element class="content-after max-h-lh::after" />