Utilities for controlling how flex items shrink.
<div class="flex ...">
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
<div class="flex-shrink h-16 ...">
<!-- This item will shrink -->
</div>
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
</div>
<div class="flex ...">
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
<div class="flex-shrink-0 h-16 w-40 ...">
<!-- This item will not shrink below its initial size-->
</div>
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
</div>
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.
<div class="flex ...">
<!-- ... -->
<div class="flex-shrink md:flex-shrink-0 ...">
Responsive flex item
</div>
<!-- ... -->
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
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,
}
}
}
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: {
extend: {
// ...
+ flexShrink: ['hover', 'focus'],
}
}
}
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,
}
}