Min-Width

Sets the minimum width an element can have, preventing it from becoming narrower than the specified value. Min-width is essential for responsive design, ensuring elements maintain usability and readability even on small screens or when their container is resized. In Tailwind v4, min-width utilities have enhanced compatibility with flexbox and grid layouts.

Sizing1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex flex-wrap gap-4">
  <div class="min-w-0 bg-blue-100 p-2 truncate">min-w-0 (shrink to 0 if needed, with text truncation)</div>
  <div class="min-w-full bg-blue-200 p-2">min-w-full (minimum 100% width of parent)</div>
  <div class="min-w-[200px] bg-blue-300 p-2">min-w-[200px] (custom minimum width)</div>
</div>

Examples

Different min-width values

<div class="flex flex-wrap gap-4">
  <div class="min-w-0 bg-blue-100 p-2 truncate">min-w-0 (shrink to 0 if needed, with text truncation)</div>
  <div class="min-w-full bg-blue-200 p-2">min-w-full (minimum 100% width of parent)</div>
  <div class="min-w-[200px] bg-blue-300 p-2">min-w-[200px] (custom minimum width)</div>
</div>

Edit in playground

Using min-width to prevent flex items from shrinking too much

<!-- Preventing flex item from shrinking too much -->
<div class="flex gap-4 bg-gray-100 p-4 rounded overflow-x-auto">
  <div class="min-w-[150px] flex-shrink bg-white p-4 rounded shadow">
    <h3 class="font-bold">Card 1</h3>
    <p>This card won't shrink below 150px width.</p>
  </div>
  <div class="min-w-[150px] flex-shrink bg-white p-4 rounded shadow">
    <h3 class="font-bold">Card 2</h3>
    <p>This card won't shrink below 150px width.</p>
  </div>
  <div class="min-w-[150px] flex-shrink bg-white p-4 rounded shadow">
    <h3 class="font-bold">Card 3</h3>
    <p>This card won't shrink below 150px width.</p>
  </div>
</div>

Edit in playground

Using min-width on form inputs for better user experience

<!-- Form input with min-width for better UX -->
<form class="max-w-md mx-auto p-4 bg-white rounded shadow">
  <div class="mb-4">
    <label class="block text-gray-700 mb-2" for="name">Full Name</label>
    <input id="name" type="text" class="w-full min-w-[250px] px-3 py-2 border rounded" placeholder="John Doe">
  </div>
  <div class="flex justify-end">
    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>
  </div>
</form>

Edit in playground

Table with min-width columns to ensure content readability

<!-- Table with min-width to ensure readability -->
<div class="overflow-x-auto">
  <table class="min-w-full bg-white border">
    <thead>
      <tr class="bg-gray-100">
        <th class="min-w-[100px] p-3 text-left border-b">ID</th>
        <th class="min-w-[200px] p-3 text-left border-b">Name</th>
        <th class="min-w-[200px] p-3 text-left border-b">Email</th>
        <th class="min-w-[150px] p-3 text-left border-b">Role</th>
        <th class="min-w-[120px] p-3 text-left border-b">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 border-b">001</td>
        <td class="p-3 border-b">Jane Smith</td>
        <td class="p-3 border-b">jane@example.com</td>
        <td class="p-3 border-b">Admin</td>
        <td class="p-3 border-b">
          <button class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Edit</button>
        </td>
      </tr>
      <tr>
        <td class="p-3 border-b">002</td>
        <td class="p-3 border-b">John Davis</td>
        <td class="p-3 border-b">john@example.com</td>
        <td class="p-3 border-b">User</td>
        <td class="p-3 border-b">
          <button class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Edit in playground

Live Preview

Try the Min-Width utility with different values

Open Interactive Playground

Variants

min-w-0: 0px minimum width (useful in flex layouts); min-w-full: 100% of container width; min-w-min: min-content width; min-w-max: max-content width; min-w-fit: fit-content width; arbitrary values can be specified with min-w-[200px] syntax

0fullminmaxfit