Auto Default

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

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:

Use 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:

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 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

xl

Customizing

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 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.