Flex Shrink

Utilities for controlling how flex items shrink.

Class reference

Class Properties
.flex-shrink flex-shrink: 1;
.flex-shrink-0 flex-shrink: 0;

Shrink

Use .flex-shrink to allow a flex item to shrink if needed:

Longer content that cannot flex
Item that will shrink even if it causes the content to wrap
Longer content that cannot flex
<div class="flex bg-gray-200">
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Longer content that cannot flex
  </div>
  <div class="flex-shrink text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that will shrink even if it causes the content to wrap
  </div>
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Longer content that cannot flex
  </div>
</div>

Don't shrink

Use .flex-shrink-0 to prevent a flex item from shrinking:

Item that can shrink if needed
Item that cannot shrink below its initial size
Item that can shrink if needed
<div class="flex bg-gray-200">
  <div class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
  <div class="flex-shrink-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that cannot shrink below its initial size
  </div>
  <div class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
</div>

Responsive

To control how a flex item shrinks at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-shrink-0 to apply the flex-shrink-0 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed

Customizing

Shrink Values

By default Tailwind provides two flex-shrink utilities. You change, add, or remove these by editing the theme.flexShrink section of your Tailwind config.

// tailwind.config.js
module.exports = {
theme: {
flexShrink: {
      '0': 0,
-     default: 1,
+     default: 2,
+     '1': 1,
}
}
}

Responsive and pseudo-class variants

By default, only responsive variants are generated for flex shrink utilities.

You can control which variants are generated for the flex shrink utilities by modifying the flexShrink property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   flexShrink: ['responsive'],
+   flexShrink: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the flex shrink utilities in your project, you can disable them entirely by setting the flexShrink property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
corePlugins: {
    // ...
+   flexShrink: false,
}
}