Tailwind CSS Academy · Lesson

Width Utilities

Set fixed widths with w-4, w-64, etc., use fractional widths like w-1/2, and stretch to full with w-full and w-screen.

Controlling Width in Tailwind

Setting element widths is one of the most common layout tasks in CSS. Tailwind provides the w-* family of utilities that cover fixed sizes, fractional sizes, percentage-based sizes, and viewport-relative sizes. Instead of memorizing pixel values, you work with Tailwind's consistent spacing scale and semantic keywords that map to well-designed CSS values.

<!-- Width examples side by side -->
<div class="space-y-2">
  <div class="w-32 bg-blue-100 p-2">w-32 (128px)</div>
  <div class="w-1/2 bg-blue-200 p-2">w-1/2 (50%)</div>
  <div class="w-full bg-blue-300 p-2">w-full (100%)</div>
</div>

Fixed Width With the Spacing Scale

Fixed widths follow Tailwind's spacing scale where each unit equals 4px (0.25rem). So w-4 is 16px, w-16 is 64px, and w-64 is 256px. The scale goes up to w-96 (384px). These values are perfect for icons, avatars, sidebars, and any element with a known, fixed size that should not change with viewport width.

<!-- Fixed-size avatar and sidebar examples -->
<div class="flex gap-4 items-center">
  <!-- Avatar: 12 x 12 = 48px -->
  <div class="w-12 h-12 rounded-full bg-indigo-400 flex items-center justify-center text-white font-bold">
    JD
  </div>

  <!-- Sidebar: 64 = 256px -->
  <div class="w-64 bg-gray-100 p-4 rounded">
    Sidebar panel (256px)
  </div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy