Tailwind CSS Min-Width
The `min-w` utility in Tailwind CSS sets the smallest width an element is allowed to shrink to.
Tailwind Min Width
The min-w
utility in Tailwind CSS sets the smallest width an element is allowed to shrink to. It’s a convenient way to make sure buttons don’t collapse, inputs stay usable, and layouts don’t break on smaller screens.
How to Set Tailwind Min-Width
You apply minimum width with the min-w-{size}
class. Common options are:
-
min-w-{value}
→ sets a fixed width in pixels. -
min-w-full
→ forces the element to be at least as wide as its parent. -
min-w-0
→ removes any minimum width, letting the element shrink down if needed.
<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
You’re not limited to pixels. Tailwind also supports percentages. Use min-w-{percentage}
to tie an element’s minimum width to its parent.
<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
Need widths to adapt across breakpoints? Prefix your class with the breakpoint name. For example:
<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
When the defaults don’t cut it, you can drop in exact values with square brackets:
<div class="min-w-[400px]">...</div><div class="min-w-[calc(100%-2rem)]">...</div>
Preview
⚙️ Customization in tailwind.config.js
If you want more semantic or reusable widths, extend the config:
// tailwind.config.jsmodule.exports = { theme: { extend: { minWidth: { card: "18rem", sidebar: "16rem", input: "12rem", }, }, },};
Then use:
<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
<aside class="min-w-[220px] bg-gray-100 p-6">Sidebar content</aside><main class="flex-1 p-6">Main content</main>
Preview
Keeps the sidebar fixed while the main content grows.
🔸 Button Row
<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
<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 cards readable and consistent as the grid changes.
✅ Best Practices
-
Use
min-w-*
only when you need to prevent collapsing, not as a general width setter. -
Combine with
max-w-*
to define a flexible range. -
Works best with flexbox, grid, or inline-block layouts.
-
Define semantic names in your config for cleaner code.
♿ Accessibility Notes
-
Don’t force widths so tight they cause horizontal scrolling on small screens.
-
Be careful with
overflow-hidden
, you don’t want to hide important text.
Tailwind min-width class Table
Class | Properties |
---|---|
min-w-0 | min-width: 0px; |
min-w-full | min-width: 100%; |
min-w-min | min-width: min-content; |
min-w-max | min-width: max-content; |
🔍 Want to Learn More?
Windframe Tailwind blocks
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
