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

Get now
Last updated: 9 July 2025

Tailwind CSS Min-Width

The min-w utility in Tailwind CSS sets the minimum width an element is allowed to shrink to.


Tailwind Min Width

The min-w utility in Tailwind CSS sets the minimum width an element is allowed to shrink to. It ensures that a component or element never gets smaller than the defined value — critical for responsive layouts, inputs, buttons, cards, and preventing broken UI.

How to Set Tailwind Min-Width

To set the minimum width of an element, you can use the min-w-{size} class, where {size} can be one of the following options:

  • min-w-{value}: This sets the minimum width to a specific value in pixels.

  • min-w-full: This sets the minimum width to 100% of the parent container.

  • min-w-0: This sets the minimum width to 0, effectively hiding the element if there is no content.

Here's an example of how to use the min-width utility classes:

html
<div class="min-w-50 ....">This div has a minimum width of 50 pixels.</div>

Preview

This div has a minimum width of 50 pixels.

Percentage-based Min-Width

Tailwind CSS also provides utility classes for setting minimum width as a percentage of the parent container's width. You can use the min-w-{percentage} class to achieve this. Here's an example:

html
<div class="min-w-full">
This div has a minimum width of 100% of its parent container.
</div>

Preview

This div has a minimum width of 100% of its parent container.

Responsive min-width

Tailwind CSS allows you to control the minimum width of elements responsively at different breakpoints. To use responsive min-width classes, you can append the breakpoint prefix to the min-width classes. For example, md:min-w-48 sets the minimum width to 48 pixels starting from the medium breakpoint and above. Here's an example:

html
<div class="min-w-64 md:min-w-48">
This div has a minimum width of 64 pixels by default, and 48 pixels starting
from the medium breakpoint.
</div>

Preview

This div has a minimum width of 64 pixels by default, and 48 pixels starting from the medium breakpoint.

In the above example, the min-w-64 class is applied by default, setting the minimum width to 64 pixels. However, starting from the medium breakpoint and above, the md:min-w-48 class is applied, changing the minimum width to 48 pixels.

✏️ Arbitrary Value Usage

For pixel-perfect control or working with exact Figma specs, Tailwind allows custom values using square brackets.

html
<div class="min-w-[400px]">...</div>
<div class="min-w-[calc(100%-2rem)]">...</div>

Preview

A
B

Use this when the default scale isn’t precise enough.

⚙️ Customization in tailwind.config.js

You can extend the minWidth scale to match your design system or semantic spacing.

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
minWidth: {
card: "18rem",
sidebar: "16rem",
input: "12rem",
},
},
},
};

Then use:

html
<div class="rounded-t-xl overflow-hidden bg-blue-100 p-5 ">
<div
class="min-w-card bg-white p-4 flex-col justify-center items-center rounded shadow-2xl"
>
<h1 class="font-bold text-2xl m-3">Card</h1>
<p class="text-gray-600 m-3">This is a way to show custome mini-width</p>
</div>
</div>

Preview

Card

This is a way to show custome mini-width

This keeps your utility classes readable and aligned with design.

🧩 Real UI Component Examples

🔸 Sidebar Layout

html
<aside class="min-w-[220px] bg-gray-100 p-6">Sidebar content</aside>
<main class="flex-1 p-6">Main content</main>

Preview

Main Content

Locks the sidebar width while allowing the main content to grow.

🔸 Button Row

html
<div class="flex gap-4">
<button class="min-w-[100px] bg-blue-600 text-white py-2 px-4 rounded">
Save
</button>
<button class="min-w-[100px] bg-gray-200 text-black py-2 px-4 rounded">
Cancel
</button>
</div>

Preview

Ensures consistent button width regardless of text length.

🔸 Responsive Card Grid

html
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="min-w-[260px] p-4 bg-white rounded shadow">Card 1</div>
<div class="min-w-[260px] p-4 bg-white rounded shadow">Card 2</div>
</div>

Preview

Card 1

First card

Card 2

Second card

Keeps card width stable even when grid resizes.

✅ Best Practices

  • Use min-w-* only when you need layout constraints — not for general sizing.

  • Combine with max-w-\* to define a range (min-to-max width).

  • Pair with flex, grid, or inline-block layouts that support shrinking/growing.

  • Use custom values or semantic names for clarity and design consistency.

♿ Accessibility Notes

  • Ensure min-width doesn’t cause horizontal scroll on smaller screens.

  • Use overflow-hidden cautiously if content is wider than your min-w allows — don’t clip important text.

Tailwind min-width class Table

ClassProperties
min-w-0 min-width: 0px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;

🔍 Want to Learn More?

Windframe Tailwind blocks

Pricing

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