Fixed and fluid widths

Utilities for controlling the width of an element.

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;


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 ...">


Use .w-auto to let the browser calculate and set the width for the element.

<div class="block w-auto">
<div class="inline-block w-auto ...">

Screen width

Use .w-screen to make an element span the width of the viewport.


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


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.


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

$hover-variants: (
  // ...