Tailwind Flexbox Classes to CSS

Tailwind Flexbox Utilities in CSS

Tailwind provides a comprehensive set of flexbox utility classes that map directly to CSS flexbox properties. Understanding these mappings is essential when debugging layouts or migrating away from Tailwind.

Core Flex Display

The flex class sets display: flex, while inline-flex sets display: inline-flex. These are the foundation of any flex layout.

/* flex */
display: flex;

/* inline-flex */
display: inline-flex;

Direction and Wrapping

Tailwind's direction classes map to the flex-direction property:

• flex-row → flex-direction: row (default, horizontal)
• flex-col → flex-direction: column (vertical)
• flex-row-reverse → flex-direction: row-reverse
• flex-col-reverse → flex-direction: column-reverse

For wrapping, flex-wrap maps to flex-wrap: wrap and flex-nowrap maps to flex-wrap: nowrap.

Alignment

The most commonly used alignment classes are:

/* items-center */
align-items: center;

/* items-start */
align-items: flex-start;

/* justify-between */
justify-content: space-between;

/* justify-center */
justify-content: center;

Flex Shorthand

Tailwind's flex-1, flex-auto, flex-initial, and flex-none map to the CSS flex shorthand property, which combines flex-grow, flex-shrink, and flex-basis into a single declaration.