Docs Import Blocks Full Pages Form Builder Pricing Support Refer and earn

Last updated: 2 July 2025

Tailwind CSS Width

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

Tailwind Width

The tailwind width utility classes allow you to easily control the width of elements in your web applications. With a wide range of options and flexibility, you can achieve responsive designs and fine-grained control over the width of your elements.

How to set Tailwind Width

You can set the Tailwind width of an element using the w-{size} utility class, where {size} represents the desired width. The {size} can be a fixed width in pixels (e.g., w-64), a relative width using a fraction (e.g., w-1/2), or a percentage width (e.g., w-1/4 or 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

Understanding Tailwind's Width Utility Types

🔹Tailwind Fixed Widths (Spacing Scale)

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

w-60

w-80

W-96

🔹Fractional Tailwind Widths (Percentages)

For a more fluid design, Tailwind provides classes for percentage-based widths. These are especially useful for creating responsive layouts.

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

🔹Tailwind ViewPoint Width

Sometimes, you might want an element to span the entire width of the viewport. Tailwind has classes like w-screen for full viewport width.

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

Arbitrary values let you apply any valid CSS value directly in your class name. They're ideal for quick experimentation or pixel-perfect requirements.

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

Tailwind allows width transitions on interactive states:

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

Tips:

Always use transition-* utilities
Keep transitions subtle to avoid layout shifts

Responsive Tailwind Width

Tailwind’s mobile-first approach lets you define different widths at different screen sizes. To use responsive tailwind width classes, you can append the breakpoint prefix to the width class. For example, md:w-1/2 sets the width to 50% starting from the medium breakpoint and above.

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 enables scalable designs without writing custom media queries.

Customizing Tailwind Width

Tailwind CSS provides an extensive configuration file that allows you to customize various aspects of the framework, including width values. This promotes consistency across components and is especially useful for team projects.

// 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

Width sets a clear container size and aligns multiple pricing plans evenly.

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

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

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

Fractional widths adapt within grid columns for fluid responsiveness.

Modal content

Combines viewport width with max-w-* for balanced sizing on all screens.

Call to Action Button

html

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

Preview

w-fit allows button text to define the width naturally.

Best Practices for Tailwind CSS Width

Use spacing-scale classes before arbitrary values
Match w-* with max-w-* for better control
Pair width utilities with padding (p-*) and margin (m-*) to maintain structure
Use w-fit for dynamic UI like labels, tags, buttons
Name custom widths in tailwind.config.js for reusability and team clarity

Accessibility and Layout Integrity

Use max-w-prose for content-heavy sections

Prevent layout overflow with w-full + overflow-x-auto

Avoid w-screen on mobile without testing for safe areas

Test hover states for devices without hover input

Common Pitfalls and How to Avoid Them

Fixed widths (w-96, w-[400px]) can break responsive layouts
Avoid unnecessary w-screen without scroll containment
Layout shifts on hover if you change w-* without transitions
Missing base width (w-full) can collapse layouts at smaller breakpoints

Tailwind Width Class

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

📚 Ready to Keep Going?

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

Windframe Tailwind blocks

landing page

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe

Build Stunning Tailwind UIs 10x faster

Visit Windframe →

Tailwind CSS Width

Tailwind Width

How to set Tailwind Width

Preview

Understanding Tailwind's Width Utility Types

🔹Tailwind Fixed Widths (Spacing Scale)

Preview

🔹Fractional Tailwind Widths (Percentages)

Preview

🔹Tailwind ViewPoint Width

Preview

Showing the w-screen

🧩Arbitrary Values

Preview

Hover and Focus Interactions with Width

Preview

Responsive Tailwind Width

Preview

Customizing Tailwind Width

Preview

Real-World UI Layout Patterns

💳Pricing Table Card

Preview

Our Pricing Plans

Free

Pro

Enterprise

🖼️E-commerce Responsive Product Card

Preview

Glasses Glow

Glasses Glow

Protective Sunglasses

💬Modal Dialog

Call to Action Button

Preview

Best Practices for Tailwind CSS Width

Accessibility and Layout Integrity

Common Pitfalls and How to Avoid Them

Tailwind Width Class

📚 Ready to Keep Going?

Windframe Tailwind blocks

Start building stunning tailwind UIs!