Width

Basic usage

Fixed widths

Use w-{number} or w-px to set an element to a fixed width.

<div className="**w-96** ..."></div>
<div className="**w-80** ..."></div>
<div className="**w-64** ..."></div>
<div className="**w-48** ..."></div>
<div className="**w-40** ..."></div>
<div className="**w-32** ..."></div>
<div className="**w-24** ..."></div>

Percentage widths

Use w-{fraction} or w-full to set an element to a percentage based width.

<div className="flex ...">
  <div className="**w-1/2** ... ">w-1/2</div>
  <div className="**w-1/2** ... ">w-1/2</div>
</div>
<div className="flex ...">
  <div className="**w-2/5** ...">w-2/5</div>
  <div className="**w-3/5** ...">w-3/5</div>
</div>
<div className="flex ...">
  <div className="**w-1/3** ...">w-1/3</div>
  <div className="**w-2/3** ...">w-2/3</div>
</div>
<div className="flex ...">
  <div className="**w-1/4** ...">w-1/4</div>
  <div className="**w-3/4** ...">w-3/4</div>
</div>
<div className="flex ...">
  <div className="**w-1/5** ...">w-1/5</div>
  <div className="**w-4/5** ...">w-4/5</div>
</div>
<div className="flex ...">
  <div className="**w-1/6** ...">w-1/6</div>
  <div className="**w-5/6** ...">w-5/6</div>
</div>
<div className="**w-full** ...">w-full</div>

Viewport width

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

<div className="**w-screen**">
  <!-- ... -->
</div>

Resetting the width

The w-auto utility can be useful if you need to remove an element's assigned width under a specific condition, like at a particular breakpoint:

<div className="w-full md:w-auto">
  <!-- ... -->
</div>