Class reference

Stretch Default

Use .items-stretch to stretch items to fill the flex container’s cross axis:

Start

Use .items-start to align items to the start of the flex container’s cross axis:

Center

Use .items-center to align items along the center of the flex container’s cross axis:

End

Use .items-end to align items to the end of the flex container’s cross axis:

Baseline

Use .items-baseline to align items along the flex container’s cross axis such that all of their baselines align:

Responsive

To control the alignment of flex items at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:items-center to apply the items-center 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 align-items utilities.

You can control which variants are generated for the align-items 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 align-items utilities.

Disabling

If you don’t plan to use the align-items 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 align-items utilities.