Tailwind Width Utilities

What Are Width Utilities?

w-* utilities map to the CSS width property. Tailwind supports fixed scale values (w-4, w-64), fractional values (w-1/2, w-2/3), percentage-style keywords (w-full), and viewport-relative values (w-screen).

min-w-* and max-w-* add lower and upper bounds, letting an element flex within a range instead of a single fixed size, which is essential for responsive components.

<div class="mx-auto w-full max-w-md rounded-lg border p-6">
  Responsive card, full width on mobile, capped at max-w-md on larger screens.
</div>

w-full lets the card fill its parent, while max-w-md prevents it from growing too wide on large screens.

Width Utility Syntax

class="w-64"        /* fixed scale value */
class="w-1/2"       /* fraction */
class="w-full"      /* 100% */
class="max-w-lg min-w-0"

• w-{n} uses the numeric spacing scale for fixed widths.
• w-{fraction} (like w-1/3) sets a percentage-based width.
• w-full, w-screen, w-min, w-max, and w-fit cover common keyword-based widths.
• max-w-* and min-w-* constrain width within a range instead of fixing it exactly.

Width Utilities Cheatsheet

The most common width patterns for layouts and components.

Fractional Widths for Column Layouts

Fractional width utilities like w-1/2, w-1/3, and w-2/3 are useful for simple percentage-based layouts without needing a full grid or flex setup, particularly for float-based or inline-block layouts.

<div class="flex">
  <div class="w-2/3 p-4">Main content (66%)</div>
  <div class="w-1/3 p-4">Sidebar (33%)</div>
</div>

Fixing Flex Overflow With min-w-0

By default, flex items won't shrink below their content's natural minimum width, which can cause long text or wide content to overflow a flex container unexpectedly. Adding min-w-0 to the item allows it to shrink properly, especially useful alongside truncate.

<div class="flex items-center gap-3">
  <img class="h-10 w-10 flex-none rounded-full" src="/avatar.jpg" alt="" />
  <p class="min-w-0 flex-1 truncate">
    A very long user name that should truncate instead of overflowing the row.
  </p>
</div>

Without min-w-0, the paragraph could push past its flex container instead of truncating with an ellipsis.

Using max-w-* for Readable Text

Long-form text becomes hard to read past roughly 65-75 characters per line. max-w-prose (65 characters) or a fixed value like max-w-2xl keeps paragraphs comfortable to read regardless of viewport width.

<article class="mx-auto max-w-prose px-4">
  <p>Long-form article text stays comfortably readable at this constrained width.</p>
</article>

Common Mistakes

• Using w-screen inside a page that already has scrollbars, which can cause horizontal overflow since 100vw includes the scrollbar width in some browsers.
• Forgetting min-w-0 on flex children that need to truncate long text.
• Setting a fixed w-* value when a responsive max-w-* combined with w-full would adapt better across screen sizes.
• Not using max-w-prose or similar constraints on long-form text, hurting readability on wide screens.
• Mixing fractional widths (w-1/2) with gap-* on a flex row without accounting for the gap in total width math.

Key Takeaways

• Width utilities cover fixed scale values, fractions, percentages, and viewport-relative sizes.
• max-w-* and min-w-* constrain an element's width within a flexible range.
• min-w-0 is a common fix for flex children that need to shrink or truncate properly.
• max-w-prose provides an optimal reading width for long-form text content.
• Fractional widths are useful for simple layouts but combine carefully with gap-* in flex rows.