Last updated: 25 August 2025

Tailwind CSS Width

The tailwind width utility classes allow you to easily control the width of elements in your web applications.

Tailwind Width

Tailwind gives you a w-* utility that sets an element’s width directly in the class name. You can use fixed sizes, percentages, fractions, or even custom values without writing CSS.

How to set Tailwind Width

Use w-{size} to set an element’s width. That size can come from Tailwind’s spacing scale (w-64), a fraction of its parent (w-1/2, w-3/4), or a percentage using arbitrary values (w-[25%]).

html
<div class="w-12">
	<div class="w-14...">w-14</div>
	<div class="w-16 ">w-16</div>
	<div class="w-32">w-32</div>
</div>

Preview

w-14

w-16

w-32

Different Ways to Set Tailwind Widths

Fixed Widths

To apply a fixed width to an element, you can use classes like w-px, w-1, w-4, w-8, etc. Each of these classes corresponds to a specific width in pixels, calculated based on the root font size (by default, 1rem is equal to 16px).

html
<div class="flex...">
	<div class="w-20...">w-20</div>
	<div class="w-32...">w-32</div>
	<div class="w-40...">w-40</div>
	<div class="w-60...">w-60</div>
	<div class="w-80...">w-80</div>
	<div class="w-96...">w-96</div>
</div>

Preview

w-20
w-32
w-40

Fractional Tailwind Widths (Percentages)

Fractional widths like w-1/2 or w-3/4 are handy when you want elements to scale with their container, like splitting a card grid evenly.

html
<div class="bg-green-500 w-full">w-full</div>
<div class="flex...">
	<div class=" bg-green-500  w-4/5">w-4/5</div>
	<div class=" bg-green-500  w-1/6">w-1/2</div>
</div>
<div class="flex...">
	<div class=" bg-green-500  w-4/5">w-4/5</div>
	<div class=" bg-green-500  w-1/5">w-1/5</div>
</div>
<div class="flex...">
	<div class=" bg-green-500 w-3/4">w-3/4</div>
	<div class=" bg-green-500 w-1/4">w-1/4</div>
</div>
<div class="flex...">
	<div class=" bg-green-500  w-2/3">w-2/3</div>
	<div class=" bg-green-500  w-1/3">w-1/3</div>
</div>
<div class="flex...">
	<div class=" bg-green-500 w-1/2">w-1/2</div>
	<div class=" bg-green-500 w-1/2">w-1/2</div>
</div>

Preview

w-full
w-4/5
w-1/2
w-4/5
w-1/5
w-3/4
w-1/4
w-2/3
w-1/3
w-1/2
w-1/2

Tailwind ViewPoint Width

When you want a section to span the entire screen width, viewport units are your friend. Tailwind exposes this with w-screen.

html
<div class="w-full bg-green-600 p-4 rounded">
	<h1 class="text-center text-white">Showing the w-screen</h1>
</div>

Preview

Showing the w-screen

Arbitrary Values

Sometimes the spacing scale isn’t enough. Arbitrary values let you set exact widths without touching your config: w-[420px], w-[35%], w-[min(80vw,600px)].

html
<div class="p-4 rounded-t-xl bg-green-100">
	<div class="flex-col space-y-4 text-center text-white font-bold">
		<div class="w-[420px] bg-green-600 p-3 rounded">Exact width in pixels</div>
		<div class="w-[35%] bg-green-600 p-3 rounded">
			Width based on parent percentage
		</div>
		<div class="w-[min(80vw,600px)] bg-green-600 p-3 rounded">
			Clamp-like behavior
		</div>
	</div>
</div>

Preview

Exact width in pixels

Width based on parent percentage

Clamp-like behavior

Hover and Focus Interactions with Width

You can animate width changes on interaction. Keep it subtle so layouts don’t jump.

html
<div class="p-4 rounded-t-xl bg-green-100 flex justify-center items-center">
	<a
		class="w-24 hover:w-36 transition-all duration-300 inline-block bg-green-600 text-white font-bold text-center p-2 rounded-md"
	>
		Hover me
	</a>
</div>

Preview

Hover me

Tip: If width changes cause layout shifts, consider transform-based animations on a child element instead.

Responsive Tailwind Width

Tailwind is mobile-first. Add breakpoint prefixes to change width at different sizes: sm:, md:, lg:, xl:, 2xl:.

html
<div class="w-full md:w-1/2 lg:w-1/4">
	Full width on mobile, half width on medium screens, and quarter width on large
	screens
</div>

Preview

Full width on mobile, half width on medium screens, and quarter width on large screens

This avoids custom media queries and scales cleanly as the viewport grows.

Customizing Tailwind Width

If certain widths show up a lot in your design system, add named tokens in tailwind.config.js. Which could be w-card, w-sidebar, etc., which reads better in code reviews.

js
// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			width: {
				card: "26rem",
				profile: "18rem",
				sidebar: "20rem",
			},
		},
	},
};
html
<div class="p-4 rounded-t-xl bg-green-100">
	<div class="flex-col space-y-4 text-center text-white font-bold">
		<div class="w-card bg-green-600 p-4 rounded">Custome-A</div>
		<div class="w-sidebar bg-green-600 p-4 rounded">Custom B</div>
	</div>
</div>

Preview

Custome-A
Custom B

Real-World UI Layout Patterns

💳Pricing Table Card

Use fixed widths, so that plan cards line up neatly across breakpoints. Pair with w-full on the CTA buttons so they feel consistent.

html
<div class="max-w-7xl mx-auto px-4 py-20">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">
		Our Pricing Plans
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
		<div
			class="bg-white rounded-xl shadow-md p-8 hover:scale-105 transition-transform duration-300 w-80"
		>
			<h3 class="text-2xl font-semibold text-gray-800 mb-4">Free</h3>
			<p class="text-gray-500 mb-6">For individuals getting started</p>
			<div class="text-4xl font-bold text-gray-800 mb-6">
				$0<span class="text-lg text-gray-500">/month</span>
			</div>
			<ul class="space-y-3 mb-8">
				<li>✅ Basic features</li>
				<li>✅ Community access</li>
				<li>🚫 No support</li>
			</ul>
			<button
				class="w-full bg-indigo-500 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-semibold"
			>
				Get Started
			</button>
		</div>
		<div
			class="bg-blue-50 border-2 border-indigo-300 rounded-xl shadow-lg p-8 hover:scale-105 transition-transform duration-300 relative w-80"
		>
			<div
				class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-indigo-500 text-white text-sm px-3 py-1 rounded-full font-medium"
			>
				Most Popular
			</div>
			<h3 class="text-2xl font-semibold text-gray-800 mb-4">Pro</h3>
			<p class="text-gray-500 mb-6">Ideal for professionals</p>
			<div class="text-4xl font-bold text-gray-800 mb-6">
				$29<span class="text-lg text-gray-500">/month</span>
			</div>
			<ul class="space-y-3 mb-8">
				<li>✅ All Free features</li>
				<li>✅ Priority support</li>
				<li>✅ Advanced analytics</li>
			</ul>
			<button
				class="w-full bg-indigo-500 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-semibold"
			>
				Choose Pro
			</button>
		</div>
		<div
			class="bg-white rounded-xl shadow-md p-8 hover:scale-105 transition-transform duration-300 w-80"
		>
			<h3 class="text-2xl font-semibold text-gray-800 mb-4">Enterprise</h3>
			<p class="text-gray-500 mb-6">For large organizations</p>
			<div class="text-4xl font-bold text-gray-800 mb-6">
				$99<span class="text-lg text-gray-500">/month</span>
			</div>
			<ul class="space-y-3 mb-8">
				<li>✅ All Pro features</li>
				<li>✅ Dedicated account manager</li>
				<li>✅ Custom integrations</li>
			</ul>
			<button
				class="w-full bg-indigo-500 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-semibold"
			>
				Contact Sales
			</button>
		</div>
	</div>
</div>

Preview

Our Pricing Plans

Free

For individuals getting started

$0/month

  • ✅ Basic features
  • ✅ Community access
  • 🚫 No support

Most Popular

Pro

Ideal for professionals

$29/month

  • ✅ All Free features
  • ✅ Priority support
  • ✅ Advanced analytics

Enterprise

For large organizations

$99/month

  • ✅ All Pro features
  • ✅ Dedicated account manager
  • ✅ Custom integrations

🖼️E-commerce Responsive Product Card

Fixed card width + responsive grid columns = clean, balanced catalog rows.

html
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 align-middle">
	<div
		class="w-80 rounded-md border shadow-2xl border-gray-200 text-align-left"
	>
		<img
			class="rounded-t mb-3 object-cover"
			src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=370&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
		/>
		<h1 class="text-gray-900 font-bold text-2xl m-4">Glasses Glow</h1>
		<p class="text-gray-600 m-4">Fashionable glasses with unique feel</p>
		<div class="flex justify-between items-center m-6">
			<span class="text-2xl font-bold text-indigo-600">$33</span>
			<button class="bg-indigo-500 text-white px-4 py-2 rounded-lg">
				Buy it
			</button>
		</div>
	</div>
	<div
		class="w-80 rounded-md border shadow-2xl border-gray-200 text-align-left"
	>
		<img
			class="rounded-t mb-3 object-cover"
			src="https://images.unsplash.com/photo-1556306510-31ca015374b0?q=80&w=370&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
		/>
		<h1 class="text-gray-900 font-bold text-2xl m-4">Glasses Glow</h1>
		<p class="text-gray-600 m-4">Fashionable glasses with unique feel</p>
		<div class="flex justify-between items-center m-6">
			<span class="text-2xl font-bold text-indigo-600">$33</span>
			<button class="bg-indigo-500 text-white px-4 py-2 rounded-lg">
				Buy it
			</button>
		</div>
	</div>
	<div
		class="w-80 rounded-md border shadow-2xl border-gray-200 text-align-left"
	>
		<img
			class="rounded-t mb-3"
			src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?q=80&w=370&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
		/>
		<h1 class="text-gray-900 font-bold text-2xl m-4">Protective Sunglasses</h1>
		<p class="text-gray-600 m-4">Fashionable glasses with unique feel</p>
		<div class="flex justify-between items-center m-6">
			<span class="text-2xl font-bold text-indigo-600">$35</span>
			<button class="bg-indigo-500 text-white px-4 py-2 rounded-lg">
				Buy it
			</button>
		</div>
	</div>
</div>

Preview

Glasses Glow

Fashionable glasses with unique feel

$33

Glasses Glow

Fashionable glasses with unique feel

$33

Protective Sunglasses

Fashionable glasses with unique feel

$35

Why this pattern works: the grid controls column count per breakpoint; w-80 keeps each card consistent, so heights and content don’t cause the layout to wobble.

💬Modal Dialog

Combine viewport width with a max-w-* cap so the dialog feels roomy on mobile and tidy on desktop.

Modal content

Call to Action Button

Let the text define the width naturally with w-fit. This avoids huge buttons on desktop.

html
<button class="w-fit px-6 py-2 bg-indigo-600 text-white rounded-lg">
	Join Now
</button>

Preview

Best practices

  • Start with the spacing scale before reaching for arbitrary values. It keeps your UI consistent.

  • Pair w-* with max-w-* to stop content from stretching too wide on large screens.

  • Don’t forget spacing (p-, m-). Width alone can make components feel cramped.

  • w-fit is great for chips, tags, and buttons where content drives the size.

  • If you reuse a size, add a named token in tailwind.config.js (w-card, w-sidebar) for readability.

Accessibility and layout integrity

  • For long-form content, cap line length with max-w-prose.

  • Prevent horizontal scroll with w-full + overflow-x-auto on containers that hold wide content (tables, code blocks).

  • Be careful with w-screen on mobile—safe areas and scrollbars can introduce overflow.

  • If you animate width on hover, test it with keyboard focus too.

Common pitfalls (and how to avoid them)

  • Large fixed widths (w-96, w-[400px]) can break small screens → add responsive overrides or a max-w-*.

  • w-screen without scroll containment can cause unintended horizontal scrolling.

  • Width changes on hover without transitions look jumpy → add transition-all duration-300.

  • Forgetting a base width (w-full) can cause columns to collapse on mobile.

Tailwind Width Class

ClassProperties
w-0width: 0px;
w-0.5width: 0.125rem;
w-1width: 0.25rem;
w-1.5 width: 0.375rem;
w-2 width: 0.5rem;
w-2.5 width: 0.625rem;
w-3width: 0.75rem;
w-3.5 width: 0.875rem;
w-4width: 1rem;
w-5width: 1.25rem;
w-6width: 1.5rem;
w-7width: 1.75rem;
w-8width: 2rem;
w-9width: 2.25rem;
w-10width: 2.5rem;
w-11 width: 2.75rem;
w-12width: 3rem;
w-14width: 3.5rem;
w-16width: 4rem;
w-20width: 5rem;
w-24width: 6rem;
w-28width: 7rem;
w-32width: 8rem;
w-36 width: 9rem;
w-40width: 10rem;
w-44width: 11rem;
w-48width: 12rem;
w-52 width: 13rem;
w-56width: 14rem;
w-60width: 15rem;
w-64width: 16rem;
w-72width: 18rem;
w-80width: 20rem;
w-96 width: 24rem;
w-auto width: auto;
w-pxwidth: 1px;
w-1/2width: 50%;
w-1/3width: 33.333333%;
w-2/3width: 66.666667%;
w-1/4width: 25%;
w-2/4width: 50%;
w-3/4width: 75%;
w-1/5width: 20%;
w-2/5width: 40%;
w-3/5width: 60%;
w-4/5width: 80%;
w-1/6width: 16.666667%;
w-2/6width: 33.333333%;
w-3/6width: 50%;
w-4/6width: 66.666667%;
w-5/6width: 83.333333%;
w-1/12width: 8.333333%;
w-2/12width: 16.666667%;
w-3/12 width: 25%
w-4/12 width: 33.333333%
w-5/12width: 41.666667%;
w-6/12width: 50%;
w-7/12width: 58.333333%;
w-8/12width: 66.666667%;
w-9/12width: 75%;
w-10/12width: 83.333333%;
w-11/12width: 91.666667%;
w-fullwidth: 100%;
w-screenwidth: 100vw;
w-minwidth: min-content;
w-maxwidth: max-content;

📚 Ready to Keep Going?

Now that you’ve mastered Tailwind Tailwind width, try experimenting with:

Windframe Tailwind blocks

landing page

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe