Check out our free templates made with AI and polished to perfection in Windframe

Get now
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

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

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.

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

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

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

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

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