Check out our free templates made with AI and polished to perfection in Windframe
Get nowTailwind 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%]).
<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).
<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
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.
<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
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.
<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)].
<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
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.
<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
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
:.
<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.
// tailwind.config.jsmodule.exports = { theme: { extend: { width: { card: "26rem", profile: "18rem", sidebar: "20rem", }, }, },};
<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
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.
<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.
<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
Glasses Glow
Fashionable glasses with unique feel
Protective Sunglasses
Fashionable glasses with unique feel
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.
<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-*
withmax-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
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
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
