Class reference

Start Default

Use .content-start to pack lines in a flex container against the start of the cross axis:

Center

Use .content-center to pack lines in a flex container in the center of the cross axis:

End

Use .content-end to pack lines in a flex container against the end of the cross axis:

Space between

Use .content-between to distribute lines in a flex container such that there is an equal amount of space between each line:

Space around

Use .content-around to distribute lines in a flex container such that there is an equal amount of space around each line:

Responsive

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

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

Disabling

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