How to Set Width Over 100% in Tailwind CSS

Tailwind CSS provides predefined width utilities like w-full for width: 100%, but what if you need to set a width greater than 100%, such as 110%? Here’s how you can do it.

1. Using Arbitrary Values (Tailwind v3+)

Tailwind CSS v3 supports arbitrary values, allowing you to define custom widths easily:

<div class="w-[110%] bg-blue-500">This div is 110% wide</div>

This is the simplest and recommended way to set a width beyond 100%.

2. Using Custom Values in tailwind.config.js

If you frequently use widths beyond 100%, you can define custom values in your Tailwind configuration:

module.exports = {
  theme: {
    extend: {
      width: {
        110: '110%',
        120: '120%',
      },
    },
  },
  plugins: [],
}

Then, you can use it like:

<div class="w-110 bg-green-500">Custom width from config</div>

3. Using `min-w` for Overflow Control

If you need an element to expand beyond 100% but also respect content size, use:

<div class="min-w-[110%] bg-red-500">Minimum width 110%</div>

This ensures the element is at least 110% wide but can still expand further if needed.

4. Using `max-w-none` for Flexibility

To remove default width constraints, you can set:

<div class="w-[110%] max-w-none">Flexible width beyond 100%</div>

FAQs

Why doesn’t Tailwind have `w-110%` by default?

Tailwind provides common utility classes, but you can extend it using arbitrary values or custom configuration.

Does `w-[110%]` work in all Tailwind versions?

No, arbitrary values are available in Tailwind v3+. In v2, you must extend tailwind.config.js.

What’s the best way to set width beyond 100%?

If you need a one-time solution, use w-[110%]. If it’s a recurring requirement, define it in tailwind.config.js.