Skip to main content

​
Overview

Use width utilities to control the horizontal size of elements. These utilities work with percentages, auto values, and fractional widths to create flexible, responsive layouts.

​
Width Utilities

Width Properties

.w-full100%width: 100%;Full width
.w-autoAutowidth: auto;Auto width
.w-1-250%width: 50%;Half width
.w-1-333.333%width: 33.333%;One third
.w-2-366.666%width: 66.666%;Two thirds
.w-1-425%width: 25%;Quarter width
.w-3-475%width: 75%;Three quarters

​
Full Width

Use .w-full to make an element take up 100% of its container’s width. 
<div class="w-full p-4 bg-blue text-white">
  Full width container
</div>

​
Common Use Cases

  • Full-width sections
  • Form inputs
  • Container elements
  • Hero sections
<!-- Full-width form input -->
<input type="text" class="w-full p-3 border border-gray rounded" placeholder="Enter text">

​
Auto Width

Use .w-auto to let the browser calculate the width based on the element’s content. 
<div class="w-auto p-4 bg-blue text-white">
  Auto width based on content
</div>

​
Common Use Cases

  • Buttons with dynamic text
  • Inline elements
  • Elements that should size to content
  • Navigation items
<button class="w-auto px-6 py-3 bg-blue text-white rounded">
  Button Text
</button>

​
Fractional Widths

Use fractional width utilities to create column-based layouts. These utilities use percentage values that work perfectly with flexbox and grid layouts.

​
Half Width (50%)

<div class="w-1-2 p-4 bg-blue text-white">
  Half width (50%)
</div>

<div class="w-1-3 p-4 bg-blue text-white">
  One third width
</div>

​
Two Thirds (66.666%)

<div class="w-2-3 p-4 bg-blue text-white">
  Two thirds width
</div>

​
Quarter Width (25%)

<div class="w-1-4 p-4 bg-blue text-white">
  Quarter width
</div>

​
Three Quarters (75%)

<div class="w-3-4 p-4 bg-blue text-white">
  Three quarters width
</div>

​
Width Examples

​
Two-Column Layout

<div class="flex gap-6">
  <div class="w-1-2 p-6 bg-gray-light rounded">
    <h3 class="text-xl font-semibold mb-4">Left Column</h3>
    <p class="text-gray">Content goes here</p>
  </div>
  <div class="w-1-2 p-6 bg-gray-light rounded">
    <h3 class="text-xl font-semibold mb-4">Right Column</h3>
    <p class="text-gray">Content goes here</p>
  </div>
</div>

​
Three-Column Grid

<div class="flex flex-wrap gap-6">
  <div class="w-1-3 p-6 bg-gray-light rounded">
    <h3 class="text-lg font-semibold mb-2">Column 1</h3>
    <p class="text-gray">Content</p>
  </div>
  <div class="w-1-3 p-6 bg-gray-light rounded">
    <h3 class="text-lg font-semibold mb-2">Column 2</h3>
    <p class="text-gray">Content</p>
  </div>
  <div class="w-1-3 p-6 bg-gray-light rounded">
    <h3 class="text-lg font-semibold mb-2">Column 3</h3>
    <p class="text-gray">Content</p>
  </div>
</div>

<div class="flex gap-6">
  <aside class="w-1-4 p-6 bg-gray-light rounded">
    <h2 class="text-lg font-semibold mb-4">Sidebar</h2>
    <nav class="flex flex-col gap-2">
      <a href="#" class="text-gray">Link 1</a>
      <a href="#" class="text-gray">Link 2</a>
    </nav>
  </aside>
  <main class="w-3-4 p-6 bg-white rounded">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p class="text-gray">Content goes here</p>
  </main>
</div>

​
Full-Width Form

<form class="max-w-md">
  <div class="mb-4">
    <label class="text-sm font-medium mb-2">Email</label>
    <input type="email" class="w-full p-3 border border-gray rounded">
  </div>
  <div class="mb-4">
    <label class="text-sm font-medium mb-2">Message</label>
    <textarea class="w-full p-3 border border-gray rounded" rows="4"></textarea>
  </div>
  <button class="w-full btn btn-blue">Submit</button>
</form>

​
Best Practices

1

Use with Flexbox

Combine width utilities with flexbox (.flex) for responsive column layouts.
2

Use Full Width for Forms

Use .w-full for form inputs and textareas to ensure consistent sizing.
3

Combine with Max Width

Use width utilities with max-width utilities to create centered, constrained layouts.
4

Consider Responsive Design

Use fractional widths with flex-wrap for responsive layouts that stack on mobile.

​
Common Patterns

​
Responsive Card Grid

<div class="flex flex-wrap gap-6">
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">Card 1</div>
  </div>
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">Card 2</div>
  </div>
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">Card 3</div>
  </div>
</div>

​
Centered Container

<div class="w-full max-w-2xl mx-auto p-6">
  <h1 class="text-3xl font-bold mb-4">Centered Content</h1>
  <p class="text-gray">Content with max width constraint</p>
</div>

Max Width

Constrain maximum element width

Height

Control element height

Flexbox

Flexbox utilities for layouts

Sizing

All sizing utilities overview