Flex Grow

Controls the growth of flex elements.

Class	Property
fg-0	flex-grow: 0;
fg-1	flex-grow: 1;
fg-2	flex-grow: 2;
fg-3	flex-grow: 3;
fg-4	flex-grow: 4;
fg-5	flex-grow: 5;
fg-6	flex-grow: 6;
fg-7	flex-grow: 7;
fg-8	flex-grow: 8;

---

Using responsive modifiers

Using responsive breakpoints like sm:fg-*, md:fg-*, lg:fg-*, and xxl:fg-* allows targeting specific utilities in different viewports.

<div class="fg-1 md:fg-2 ..."></div>

Using hover modifiers

Using :hover modifiers such as h:fg-* allows you to override elements and change their values when hovering over them.

<div class="fg-1 h:fg-2 ..."></div>