Class reference

Initial Default

Use .flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

Flex 1

Use .flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

Auto

Use .flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

None

Use .flex-none to prevent a flex item from growing or shrinking:

Grow

Use .flex-grow to allow a flex item to grow to fill any available space:

Don’t grow

Use .flex-no-grow to prevent a flex item from growing:

Shrink

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

Don’t shrink

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

Responsive

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

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

all

sm

md

lg

xl

Customizing

Responsive and State Variants

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

You can control which variants are generated for the flex, grow, and shrink utilities by modifying the flexbox property in the modules section of your Tailwind config file.

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

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex, grow, and shrink utilities.

Disabling

If you don’t plan to use the flex, grow, and shrink utilities in your project, you can disable them entirely by setting the flexbox property to false in the modules section of your config file:

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex, grow, and shrink utilities.