- ☀️Light
- 🌙Dark
- 💻System
📐 What are sizing utilities used for?
Sizing utilities control an element’s width and height using percentage-based values,
as well as viewport-relative units (vh and vw).
They also provide min-* and max-* variants to constrain
how far an element can grow or shrink.
All these utilities are generated from a shared set of maps:
$sizesPercent,
$vh-sizes,
and
$vw-sizes,
and they support responsive variants based on the global
$breakpoints configuration.
📏 Width & Height Utilities Reference
All utilities come from three size maps:
Value:
0,
10,
20,
30,
40,
50,
60,
70,
80,
90,
100,
auto,
Breakpoint:
xs,
sm,
md,
lg,
xl,
xxl,
.w-{value}
Sets the element width using one of the available values (including
auto).
.w-{value}-{breakpoint}
Sets the element width from a specific breakpoint, using any defined value
(including auto).
.h-{value}
Sets the element height using one of the available values (including
auto).
.h-{value}-{breakpoint}
Sets the element height from a specific breakpoint, using any defined value
(including auto).
.min-w-{value}
Sets a minimum width using a percentage value.
The value auto is not supported for this utility.
.min-w-{value}-{breakpoint}
Sets a minimum width from a specific breakpoint, using a percentage value.
The value auto is not supported for this utility.
.max-w-{value}
Sets a maximum width using a percentage value.
The value auto is not supported for this utility.
.max-w-{value}-{breakpoint}
Sets a maximum width from a specific breakpoint, using a percentage value.
The value auto is not supported for this utility.
.min-h-{value}
Sets a minimum height using a percentage value.
The value auto is not supported for this utility.
.min-h-{value}-{breakpoint}
Sets a minimum height from a specific breakpoint, using a percentage value.
The value auto is not supported for this utility.
.max-h-{value}
Sets a maximum height using a percentage value.
The value auto is not supported for this utility.
.max-h-{value}-{breakpoint}
Sets a maximum height from a specific breakpoint, using a percentage value.
The value auto is not supported for this utility.
.vh-{value}
Sets the element height using a viewport height unit (vh).
The value auto is not supported for this utility.
.vh-{value}-{breakpoint}
Sets the element height in vh from a specific breakpoint.
The value auto is not supported for this utility.
.min-vh-{value}
Sets a minimum height in viewport units (vh).
The value auto is not supported for this utility.
.min-vh-{value}-{breakpoint}
Sets a minimum viewport height from a specific breakpoint.
The value auto is not supported for this utility.
.max-vh-{value}
Sets a maximum height in viewport units (vh).
The value auto is not supported for this utility.
.max-vh-{value}-{breakpoint}
Sets a maximum viewport height from a specific breakpoint.
The value auto is not supported for this utility.
.vw-{value}
Sets the element width using a viewport width unit (vw).
The value auto is not supported for this utility.
.vw-{value}-{breakpoint}
Sets the element width in vw from a specific breakpoint.
The value auto is not supported for this utility.
.min-vw-{value}
Sets a minimum width in viewport units (vw).
The value auto is not supported for this utility.
.min-vw-{value}-{breakpoint}
Sets a minimum viewport width from a specific breakpoint.
The value auto is not supported for this utility.
.max-vw-{value}
Sets a maximum width in viewport units (vw).
The value auto is not supported for this utility.
.max-vw-{value}-{breakpoint}
Sets a maximum viewport width from a specific breakpoint.
The value auto is not supported for this utility.