Tailwind Flex Grow

The flex-grow utility class in Tailwind CSS lets you control how flex items grow relative to the rest of the flex container. This is especially useful when designing flexible layouts that adapt to different screen sizes and content. The flex-grow utility class in Tailwind CSS lets you control how flex items grow relative to the rest of the flex container. This is especially useful when designing flexible layouts that adapt to different screen sizes and content.

How to apply Tailwind Flex Grow

To apply tailwind flex grow to a flex item, you can use the flex-grow-{value} utility class, where {value} represents the desired growth factor. The {value} can range from 0 to a positive integer, determining the proportion of available space the flex item should occupy.

<div class="flex">
  <div>
    <div class="flex-grow-0">Item 1</div>
    <div class="flex-grow">Item 2</div>
  </div>
</div>

Preview

Responsive Tailwind Flex Grow

Tailwind CSS allows you to apply flex grow responsively at different breakpoints. To use responsive tailwind flex grow classes, you can append the breakpoint prefix to the flex grow class. For example, md:flex-grow-2 applies a flex grow value of 2 starting from the medium breakpoint and above.

<div class="flex">
  <div class="flex-grow md:flex-grow-0">Item 1</div>
  <div class="flex-grow md:flex-grow">Item 2</div>
  <div class="flex-grow-2 md:flex-grow-4">Item 3</div>
</div>

Preview

In the above example, the flex grow behavior of the items is modified based on the breakpoints. The first item has a flex grow value of 0 by default, but starting from the medium breakpoint and above (md:flex-grow-0), it does not grow. The second item has a flex grow value of 1 by default, but starting from the medium breakpoint and above (md:flex-grow), it grows. The third item has a flex grow value of 2 by default, but starting from the medium breakpoint and above (md:flex-grow-4), it grows at a higher rate.

Tailwind Flex Grow Class Table

When to Use Tailwind CSS Flex Grow

Use flex-grow when:

• You want one element to fill remaining space in a flex container.

• You’re building responsive UIs that adapt to various screen sizes.

• You need dynamic layouts without complex CSS rules.

Avoid it when:

• Fixed widths are required for precise layout control.

• Content shouldn’t stretch.

✨ What's Next?

You can also check out other similar tailwind utility classes

• Tailwind CSS Shrink

• Tailwind CSS Wrap

Windframe Tailwind blocks

footer