Min width

Utilities for setting the minimum width of an element.

In this article

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


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


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


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.


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

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know