Sections

Min width

Utilities for setting the minimum width of an element.

Class Properties
.min-w-0 min-width: 0;
.min-w-50 min-width: 50%;
.min-w-full min-width: 100%;
.min-w-screen min-width: 100vw;

Usage

Use .min-w-{number} to apply a minimum width to an element.

Variants

By default, only responsive variants are generated for min width utilities.

Responsive

To control the minimum width of an element at a specific breakpoint, add a {screen}: prefix to any existing min width utility.

For example, use .md:min-w-50 to apply the min-w-50 utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:min-w-50, add "min-width" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "min-width",
);