Width

Utilities for controlling the width of an element.

In this article

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",
);

Questions or feedback about this article? Let us know