Class reference

Auto Default

Use .self-auto to align an item based on the value of the flex container’s align-items property:

Start

Use .self-start to align an item to the start of the flex container’s cross axis, despite the container’s align-items value:

Center

Use .self-center to align an item along the center of the flex container’s cross axis, despite the container’s align-items value:

End

Use .self-end to align an item to the end of the flex container’s cross axis, despite the container’s align-items value:

Stretch

Use .self-stretch to stretch an item to fill the flex container’s cross axis, despite the container’s align-items value:

Responsive

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

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

Disabling

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