Tailwind CSS Width: The Complete Guide

Tailwind CSS width utilities let you control the width of any HTML element using simple, predefined utility classes. Instead of writing custom CSS, you use the w-{size} pattern to apply fixed widths, percentage widths, viewport widths, and content-based widths like w-fit and w-full.

This guide covers every Tailwind width class — including w-full for 100% width, w-fit for fit-content, w-screen for 100vw, pixel-to-Tailwind conversions, min-width, max-width, and responsive width utilities.

Table of content

• Tailwind Width
• Tailwind Width Classes
• How to apply Tailwind CSS width
• How to Set Full Width in Tailwind
• Tailwind Width Fit Content (w-fit)
• Tailwind Viewport Width (w-screen / 100vw)
• Tailwind Pixel to Width Conversion
• Tailwind Fixed width
• Setting Width as a Percentages
• Responsive Width Adjustments
• Customizing Widths with Tailwind
• Tailwind Max width
• Tailwind Max width classes
• How to Use Tailwind Max Width
• Tailwind Min-width
• Tailwind Min-width Classes
• How to Use Tailwind Min Width
• Customizing Tailwind Max Width, and Min Width
• Frequently Asked Questions
• Conclusion

Tailwind Width

Tailwind width is a utility that allows you to set the width of an element using pre-defined classes. These classes range from w-0 (0px) to w-full for 100% width, covering various sizes in between. This means you can quickly and easily set the width of an element without writing custom CSS.

<div class="w-32">
  This div is 128 pixels wide.
</div>

Tailwind Width Classes

Below is a table of Tailwind CSS width classes and properties

How to apply Tailwind CSS Width

Using Tailwind width is straightforward. Simply add the desired width class to your HTML element, and Tailwind will take care of the rest.

<div class="w-1/2">
  This element has a width of half the parent container.
</div>

How to Set Full Width in Tailwind

To make an element take up the full width of its container, use the w-full class. This is particularly useful when you want an element to stretch across the entire width of the screen or a specific container.

<div class="w-full">
  This div will stretch to the full width of its container.
</div>

Preview

Tailwind Width Fit Content (w-fit)

The w-fit class sets an element's width to fit-content, meaning the element will be exactly as wide as its content requires. Unlike w-full which stretches to fill the parent, w-fit shrink-wraps the element to its content size.

This is especially useful for buttons, badges, tags, and inline elements that should not stretch beyond their text.

<div class="w-fit bg-purple-500 text-white px-4 py-2 rounded">
  This div is only as wide as this text
</div>

<button class="w-fit px-6 py-2 bg-blue-600 text-white rounded-lg">
  Click Me
</button>

Tailwind also provides two related content-based width utilities:

• w-min sets width: min-content — the element becomes as narrow as its longest unbreakable word or element.
• w-max sets width: max-content — the element expands to fit all content on one line without wrapping.

<div class="w-min bg-red-100 p-4">This breaks at each word</div>
<div class="w-max bg-green-100 p-4">This stays on one line</div>
<div class="w-fit bg-blue-100 p-4">This fits the content naturally</div>

Tailwind Viewport Width (w-screen / 100vw)

The w-screen class sets an element's width to 100vw — the full width of the browser viewport. Unlike w-full (which is 100% of the parent container), w-screen ignores parent constraints and spans the entire window.

<div class="w-screen bg-gray-800 text-white p-4">
  This element spans the full viewport width regardless of parent width
</div>

Tailwind also supports the newer CSS viewport unit variants:

Use w-screen when you need full-bleed sections that break out of a constrained parent container.

Tailwind Pixel to Width Conversion

When converting from CSS pixel values to Tailwind width classes, divide the pixel value by 4 to get the class number. Tailwind's spacing scale is based on rem where 1rem = 16px, and each Tailwind unit equals 0.25rem (4px).

For pixel values not in the default scale, use Tailwind's arbitrary value syntax:

<div class="w-[200px]">Exactly 200px wide</div>
<div class="w-[15rem]">Exactly 15rem wide</div>
<div class="w-[50vw]">Half the viewport width</div>

Tailwind Fixed width

To set a fixed width, you simply use the w-{size} syntax where {size} is the size you want. For example, w-24 sets the element width to 6rem (which is 96px if the default font size is 16px).

<div class="flex justify-center items-center">
  <div class="w-20">width of 80px</div>
  <div class="w-32">width of 128px</div>
  <div class="w-40">width of 160px</div>
</div>

Preview

Setting Width as a Percentages

Tailwind also allows you to set the width as a percentage of its parent container using fractional classes like w-1/4, w-1/2, or w-3/4.

<div class="flex flex-col items-center justify-center">
  <div class="w-2/6">width of 33.33%</div>
  <div class="w-1/2">width of 50%</div>
  <div class="w-3/4">width of 75%</div>
</div>

Preview

Responsive Width Adjustments

Tailwind's responsive utilities enable you to adjust widths based on the viewport size. For instance, md:w-1/2 applies a width of 50% starting from the medium breakpoint.

<div class="w-full md:w-1/2 lg:w-1/4">
  This element has a full width on small screens, half width on medium screens, and one-fourth width
  on large screens.
</div>

Preview

Customizing Widths with Tailwind

Tailwind is highly customizable, allowing you to define your own width scales in the tailwind.config.js file. This is useful for adding widths that are specific to your project's design requirements.

module.exports = {
  theme: {
    extend: {
      width: {
        '96': '24rem', // Adds a new width utility for 24rem
      },
    },
  },
};

<div class="text-lg w-96">
  This div has with of 24rem
</div>

Tailwind Max Width

Tailwind max width is a utility that allows you to set the maximum width of an element. This is useful when you want to prevent an element from becoming too wide and disrupting your layout. Max width classes range from max-w-xs of max width of 20rem to max-w-xl of max width of 80rem.

Tailwind Max Width Classes

Below are some classes used in Tailwind CSS for max width.

Tailwind CSS Max Width has a number of advantages over conventional CSS frameworks. For starters, it eliminates the need for complex media queries, allowing developers to quickly and easily create responsive designs. It also makes it easier to create designs that are optimized for different devices and screen sizes, as developers can easily set different maximum widths for different devices. You can also check out Tailwind max-width page to learn more.

How to Use Tailwind Max Width

Using Tailwind max width is similar to using width. Simply add the desired max width class to your HTML element, and Tailwind will take care of the rest. Here are some examples:

• max-w-md sets the max width to 40rem (medium-sized screens)
• max-w-lg sets the max width to 60rem (large screens)

<div class="flex">
  <div class="w-1/2 bg-indigo-600 h-12 rounded-l-lg">
    w-1/2
  </div>
  <div class="w-1/2 bg-indigo-500 h-12 rounded-r-lg">
    w-1/2
  </div>
</div>
<div class="flex ...">
  <div class="w-2/5 bg-indigo-600 h-12 rounded-l-lg">
    w-2/5
  </div>
  <div class="w-3/5 bg-indigo-500 h-12 rounded-r-lg">
    w-3/5
  </div>
</div>
<div class="flex ...">
  <div class="w-1/3 bg-indigo-600 h-12 rounded-l-lg">
    w-1/3
  </div>
  <div class="w-2/3 bg-indigo-500 h-12 rounded-r-lg">
    w-2/3
  </div>
</div>
<div class="flex ...">
  <div class="w-1/4 bg-indigo-600 h-12 rounded-l-lg">
    w-1/4
  </div>
  <div class="w-3/4 bg-indigo-500 h-12 rounded-r-lg">
    w-3/4
  </div>
</div>
<div class="flex ...">
  <div class="w-1/5 bg-indigo-600 h-12 rounded-l-lg">
    w-1/5
  </div>
  <div class="w-4/5 bg-indigo-500 h-12 rounded-r-lg">
    w-4/5
  </div>
</div>
<div class="flex ...">
  <div class="w-1/6 bg-indigo-600 h-12 rounded-l-lg">
    w-1/6
  </div>
  <div class="w-5/6 bg-indigo-500 h-12 rounded-r-lg">
    w-5/6
  </div>
</div>
<div class="w-full bg-indigo-500 h-12 rounded-lg">
  w-full
</div>

Preview

Tailwind Min Width

Tailwind min width is a utility that allows you to set the minimum width of an element. This is useful when you want to ensure that an element has a certain minimum width, even if its content is smaller. Min width classes range from min-w-xs of min width of 20rem to min-w-xl of min width of 80rem.

Tailwind Min-Width Classes

If the content is bigger than the minimum width, the min-width property has no impact. This prevents the width property's value from being less than the min-width. You can also check out Tailwind min-width page to learn more.

How to Use Tailwind Min Width

Using Tailwind min width is similar to using width. Simply add the desired min width class to your HTML element, and Tailwind will take care of the rest. Here are some examples:

• min-w-md sets the min width to 40rem (medium-sized screens)
• min-w-lg sets the min width to 60rem (large screens)

<div className="w-24 min-w-full bg-indigo-600 h-12 rounded">
  min-w-full
</div>
<div className="w-12 min-w-0 bg-indigo-300 h-12 rounded">
  min-w-0
</div>
<div className="w-12 min-w-max bg-indigo-300 h-12 rounded">
  min-w-max
</div>
<div className="flex ...">
  <div className="w-24 min-w-fit bg-indigo-600 h-12 rounded">
    min-w-fit
  </div>
  <div className=" w-24 min-w-mini  bg-indigo-300 h-12">
    min-w-mini
  </div>
</div>

Preview

Customizing Tailwind Max Width, and Min Width

While Tailwind provides a range of pre-defined max width and min width classes, you may need to create custom values for your project. Luckily, Tailwind makes it easy to do so. Simply add custom values to your tailwind.config.js file, like so:

module.exports = {
  maxWidth: {
    100: '800px',
  },
  minWidth: {
    100: '200px',
  },
};

This will add new width, max width, and min width classes max-w-100, and min-w-100, which set the max width, and min width to 800px, and 200px respectively.

Frequently Asked Questions

How do I set full width in Tailwind CSS?

Use the w-full class to make an element take up 100% of its parent container's width. If you need the element to span the entire browser viewport instead, use w-screen which sets width: 100vw.

How do I set width to fit content in Tailwind?

Use the w-fit class. This applies width: fit-content to the element, making it only as wide as its content requires while still respecting the parent container's constraints. Example: <div class="w-fit">Shrink-wrapped content</div>.

What is the difference between w-full and w-screen?

w-full sets width: 100%, which makes the element fill its parent container. w-screen sets width: 100vw, making the element span the full browser viewport width regardless of the parent's size.

How do I convert pixels to Tailwind width classes?

Divide the pixel value by 4 to get the Tailwind class number. For example, 32px = w-8, 48px = w-12, 64px = w-16, 96px = w-24. For values not in the default scale, use arbitrary values like w-[200px].

How do I set a minimum width in Tailwind CSS?

Use the min-w-{size} utilities. Common options include min-w-0, min-w-full, min-w-min, min-w-max, and min-w-fit. For custom values, use arbitrary notation: min-w-[200px].

How do I make an element 100vw wide in Tailwind?

Use the w-screen class, which applies width: 100vw. For the newer viewport unit variants, Tailwind also provides w-svw (100svw), w-lvw (100lvw), and w-dvw (100dvw).

Can I use custom width values in Tailwind?

Yes. You can extend the width scale in tailwind.config.js under theme.extend.width, or use arbitrary values directly in your HTML with square bracket notation like w-[200px], w-[50vw], or w-[calc(100%-2rem)].

Conclusion

Tailwind CSS width utilities — including w-full, w-fit, w-screen, percentage-based classes, min-width, and max-width — give you complete control over element sizing without writing custom CSS. Combined with responsive prefixes and the ability to use arbitrary values, Tailwind's width system handles everything from fixed pixel widths to dynamic, content-based sizing. Customize the default scale in your tailwind.config.js to match your project's design requirements.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.