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
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).
<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).
<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)
For a more fluid design, Tailwind provides classes for percentage-based widths. These are especially useful for creating responsive layouts.
<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
Sometimes, you might want an element to span the entire width of the viewport. Tailwind has classes like w-screen for full viewport width.
<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.
<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
Tailwind allows width transitions on interactive states:
<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
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.
<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.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
Width sets a clear container size and aligns multiple pricing plans evenly.
<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
<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
Fractional widths adapt within grid columns for fluid responsiveness.
💬Modal Dialog
Modal content
Combines viewport width with max-w-* for balanced sizing on all screens.
Call to Action Button
<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-*
withmax-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
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
