max-width

max-w

Sets max-width via --max-w.

CSS Rules

.max-w {
  max-width: calc(var(--spacing) * var(--max-w));
}

Usage

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

Responsive

Prefix .max-w 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-w" style="--md-max-w: /* 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-w:hover" style="--max-w-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-w: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-w::before" style="--max-w-before: /* value */;" />

<element class="content-after max-w::after" style="--max-w-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-w=value" />

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

[max-w]

Caps width using raw --max-w. Useful for responsive size constraints.

CSS Rules

.\[max-w\] {
  max-width: var(--max-w);
}

Usage

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

Responsive

Prefix .[max-w] 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-w]" style="--md-max-w: /* 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-w]:hover" style="--max-w-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-w]: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-w]::before" style="--max-w-before: /* value */;" />

<element class="content-after [max-w]::after" style="--max-w-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-w]=value" />

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

max-w-3xs

Caps max-width at the 3xs container size scale token.

CSS Rules

.max-w-3xs {
  max-width: var(--container-3xs);
}

Usage

<element class="max-w-3xs" />

Responsive

Prefix .max-w-3xs 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-w-3xs" />

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-w-3xs: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-w-3xs: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-w-3xs::before" />

<element class="content-after max-w-3xs::after" />

max-w-2xs

Caps max-width at the 2xs container size scale token.

CSS Rules

.max-w-2xs {
  max-width: var(--container-2xs);
}

Usage

<element class="max-w-2xs" />

Responsive

Prefix .max-w-2xs 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-w-2xs" />

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-w-2xs: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-w-2xs: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-w-2xs::before" />

<element class="content-after max-w-2xs::after" />

max-w-xs

Caps max-width at the xs container size scale token.

CSS Rules

.max-w-xs {
  max-width: var(--container-xs);
}

Usage

<element class="max-w-xs" />

Responsive

Prefix .max-w-xs 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-w-xs" />

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-w-xs: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-w-xs: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-w-xs::before" />

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

max-w-sm

Caps max-width at the sm container size scale token.

CSS Rules

.max-w-sm {
  max-width: var(--container-sm);
}

Usage

<element class="max-w-sm" />

Responsive

Prefix .max-w-sm 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-w-sm" />

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-w-sm: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-w-sm: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-w-sm::before" />

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

max-w-md

Caps max-width at the md container size scale token.

CSS Rules

.max-w-md {
  max-width: var(--container-md);
}

Usage

<element class="max-w-md" />

Responsive

Prefix .max-w-md 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-w-md" />

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-w-md: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-w-md: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-w-md::before" />

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

max-w-lg

Caps max-width at the lg container size scale token.

CSS Rules

.max-w-lg {
  max-width: var(--container-lg);
}

Usage

<element class="max-w-lg" />

Responsive

Prefix .max-w-lg 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-w-lg" />

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-w-lg: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-w-lg: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-w-lg::before" />

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

max-w-xl

Caps max-width at the xl container size scale token.

CSS Rules

.max-w-xl {
  max-width: var(--container-xl);
}

Usage

<element class="max-w-xl" />

Responsive

Prefix .max-w-xl 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-w-xl" />

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-w-xl: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-w-xl: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-w-xl::before" />

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

max-w-2xl

Caps max-width at the 2xl container size scale token.

CSS Rules

.max-w-2xl {
  max-width: var(--container-2xl);
}

Usage

<element class="max-w-2xl" />

Responsive

Prefix .max-w-2xl 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-w-2xl" />

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-w-2xl: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-w-2xl: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-w-2xl::before" />

<element class="content-after max-w-2xl::after" />

max-w-3xl

Caps max-width at the 3xl container size scale token.

CSS Rules

.max-w-3xl {
  max-width: var(--container-3xl);
}

Usage

<element class="max-w-3xl" />

Responsive

Prefix .max-w-3xl 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-w-3xl" />

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-w-3xl: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-w-3xl: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-w-3xl::before" />

<element class="content-after max-w-3xl::after" />

max-w-4xl

Caps max-width at the 4xl container size scale token.

CSS Rules

.max-w-4xl {
  max-width: var(--container-4xl);
}

Usage

<element class="max-w-4xl" />

Responsive

Prefix .max-w-4xl 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-w-4xl" />

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-w-4xl: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-w-4xl: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-w-4xl::before" />

<element class="content-after max-w-4xl::after" />

max-w-5xl

Caps max-width at the 5xl container size scale token.

CSS Rules

.max-w-5xl {
  max-width: var(--container-5xl);
}

Usage

<element class="max-w-5xl" />

Responsive

Prefix .max-w-5xl 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-w-5xl" />

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-w-5xl: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-w-5xl: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-w-5xl::before" />

<element class="content-after max-w-5xl::after" />

max-w-6xl

Caps max-width at the 6xl container size scale token.

CSS Rules

.max-w-6xl {
  max-width: var(--container-6xl);
}

Usage

<element class="max-w-6xl" />

Responsive

Prefix .max-w-6xl 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-w-6xl" />

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-w-6xl: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-w-6xl: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-w-6xl::before" />

<element class="content-after max-w-6xl::after" />

max-w-7xl

Caps max-width at the 7xl container size scale token.

CSS Rules

.max-w-7xl {
  max-width: var(--container-7xl);
}

Usage

<element class="max-w-7xl" />

Responsive

Prefix .max-w-7xl 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-w-7xl" />

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-w-7xl: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-w-7xl: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-w-7xl::before" />

<element class="content-after max-w-7xl::after" />

max-w-full

Sets max-width: 100%.

CSS Rules

.max-w-full {
  max-width: 100%;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-full::before" />

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

max-w-screen

Caps max-width at 100% of the viewport width (100vw).

CSS Rules

.max-w-screen {
  max-width: 100vw;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-screen::before" />

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

max-w-dvw

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

CSS Rules

.max-w-dvw {
  max-width: 100dvw;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-dvw::before" />

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

max-w-dvh

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

CSS Rules

.max-w-dvh {
  max-width: 100dvh;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-dvh::before" />

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

max-w-lvw

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

CSS Rules

.max-w-lvw {
  max-width: 100lvw;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-lvw::before" />

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

max-w-lvh

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

CSS Rules

.max-w-lvh {
  max-width: 100lvh;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-lvh::before" />

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

max-w-svw

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

CSS Rules

.max-w-svw {
  max-width: 100svw;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-svw::before" />

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

max-w-svh

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

CSS Rules

.max-w-svh {
  max-width: 100svh;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-svh::before" />

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

max-w-min

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

CSS Rules

.max-w-min {
  max-width: min-content;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-min::before" />

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

max-w-max

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

CSS Rules

.max-w-max {
  max-width: max-content;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-max::before" />

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

max-w-fit

Sets the maximum width to fit the element's content.

CSS Rules

.max-w-fit {
  max-width: fit-content;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-fit::before" />

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

max-w-none

Removes max-width constraint.

CSS Rules

.max-w-none {
  max-width: none;
}

Usage

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

Responsive

Prefix .max-w-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-w-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-w-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-w-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-w-none::before" />

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