Check out our free templates made with AI and polished to perfection in Windframe
Get nowTailwind 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:
<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:
<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:
<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.
<div class="min-w-[400px]">...</div><div class="min-w-[calc(100%-2rem)]">...</div>
Preview
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.
// 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
Locks the sidebar width while allowing the main content to grow.
🔸 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 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 yourmin-w
allows — don’t clip 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 a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
