幅のユーティリティ

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.

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.

Fractional width utilities express width as a fraction of the parent container. Tailwind supports halves (w-1/2), thirds (w-1/3, w-2/3), quarters (w-1/4 through w-3/4), fifths, and sixths. These compile to percentage values — for example, w-1/3 becomes width: 33.333333% — making them ideal for side-by-side column layouts.

w-full sets width to 100% of the parent container, while w-screen sets width to 100vw (the viewport width). The difference matters when the parent is not the full viewport: w-full fills the parent, but w-screen always fills the entire browser window and may cause horizontal overflow if there is a scrollbar. Use w-screen for full-viewport overlays and w-full for everything else.

w-auto lets the element take its natural or content-driven width. This is the browser default for most block elements, but you may need to apply it explicitly to override a wider width set at a different breakpoint. It is commonly used when switching from w-full on mobile back to auto sizing on desktop, for example in a button that should only be as wide as its text.

Three modern width keywords help elements size themselves based on content: w-fit makes an element as wide as its content (like fit-content), w-min sets width to the minimum content size (collapses to the longest unbreakable word), and w-max expands to the maximum content width without wrapping. These are useful for tags, pills, tooltips, and inline labels.

When the built-in scale does not cover your exact need, use the arbitrary value syntax: w-[347px] or w-[calc(100%-2rem)]. This compiles to exactly that CSS value in the JIT engine. While convenient, arbitrary values bypass the design system, so use them sparingly — first check if a fractional or fixed scale value achieves the same visual result.

Combining responsive prefixes with width utilities is one of the most powerful patterns in Tailwind. A common pattern is w-full sm:w-1/2 lg:w-1/3: full width on mobile, half on small screens, and one-third on large screens. This creates a responsive card layout from a single set of utility classes without any media query CSS.

While w-* sets an exact width, max-w-* sets an upper limit. The most important max-width utility is max-w-prose, which limits text to around 65 characters per line — the sweet spot for readability identified by typography researchers. max-w-sm through max-w-7xl give you semantic container widths matching common design breakpoints.

Inside a flex container, w-* classes interact with flex-grow and flex-shrink. A child with w-full will try to be 100% wide but the flex container can shrink it. To prevent shrinking, add shrink-0 alongside the width class. This pattern is commonly used for icons and avatars that should never squish, while the sibling text content takes the remaining space.

A classic layout pattern is a fixed-width container centered on the page. The combination of a max-width utility and mx-auto (auto horizontal margins) achieves this cleanly. Wrap your page content in max-w-5xl mx-auto px-4 to create a centered, readable column with comfortable side padding on all screen sizes.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: w-* fixed utilities follow the 4px spacing scale up to w-96, fractional utilities like w-1/2 set percentage widths relative to the parent, and w-full, w-screen, w-fit, w-min, and w-max cover semantic sizing needs. Next up we explore height utilities that complement width controls.