utilities/align-self

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

align-self utilities table

Tailwind CSS v4 align-self utilities map to CSS align-self property as follows: self-auto -> align-self: auto; self-start -> align-self: flex-start; self-end -> align-self: flex-end; self-end-safe -> align-self: safe flex-end; self-center -> align-self: center; self-center-safe -> align-self: safe center; self-stretch -> align-self: stretch; self-baseline -> align-self: baseline; self-baseline-last -> align-self: last baseline.

self-end-safe and self-center-safe utilities

The self-end-safe utility applies align-self: safe flex-end, and self-center-safe applies align-self: safe center. The 'safe' keyword ensures the item aligns to a safe alignment position, falling back to start alignment if the item would otherwise overflow due to insufficient space.

self-baseline-last utility usage

The self-baseline-last utility aligns an item along the container's cross axis such that its baseline aligns with the last baseline in the container. This is useful for ensuring that text items align with each other even if they have different heights, such as aligning a name and a URL link in a card layout with class self-baseline-last.

self-auto utility behavior

The self-auto utility aligns an item based on the value of the container's align-items property, producing align-self: auto.

self-start, self-center, self-end, self-stretch override container

The self-start, self-center, self-end, and self-stretch utilities align an individual flex or grid item to the start, center, end, or stretch of the container's cross axis respectively, overriding the container's align-items value for that specific item.

self-baseline utility usage

The self-baseline utility aligns an item such that its baseline aligns with the baseline of the flex container's cross axis. Example: applying self-baseline with different padding-top/padding-bottom values (e.g. pt-2 pb-6, pt-8 pb-12, pt-12 pb-4) on flex items causes their text baselines to align despite differing box heights.

align-self responsive design

Align-self utilities support responsive breakpoint prefixes following Tailwind's standard responsive design pattern, e.g. default class self-auto can be overridden at a breakpoint with a featured class like self-end (e.g. md:self-end).

Give your agent this brain