Utilities for setting the width of an element
| Class | Properties |
|---|---|
.w-px | width: 1px; |
.w-0 | width: 0; |
.w-1 | width: .25rem; |
.w-2 | width: .5rem; |
.w-3 | width: .75rem; |
.w-4 | width: 1rem; |
.w-5 | width: 1.5rem; |
.w-6 | width: 2rem; |
.w-7 | width: 3rem; |
.w-8 | width: 4rem; |
.w-9 | width: 6rem; |
.w-auto | width: auto; |
.w-full | width: 100%; |
.w-screen | width: 100vw; |
Usage
Fixed width
Use .w-{number|px} to apply a fixed width to an element.
<div class="w-px ..."></div>
<div class="w-1 ..."></div>
<div class="w-2 ..."></div>
<div class="w-3 ..."></div>
<div class="w-4 ..."></div>
<div class="w-5 ..."></div>
<div class="w-6 ..."></div>
<div class="w-7 ..."></div>
<div class="w-8 ..."></div>Use .w-0 to set the width of an element to 0px.
Fluid width
Use .w-full to set an element to the full width of the container.
<div class="inline-block w-full ...">
.inline-block.w-full
</div>Auto
Use .w-auto to let the browser calculate and set the width for the element.
<div class="block w-auto">
.block.w-auto
</div>
<div class="inline-block w-auto ...">
.inline-block.w-auto
</div>Screen width
Use .w-screen to make an element span the width of the viewport.
Variants
By default, only responsive variants are generated for width utilities.
Responsive
To control the width of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility.
For example, use .md:w-4 to apply the w-4 utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:w-4, add "width" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"width",
);