new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/align-items

10 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-items utility classes (v4)

Tailwind CSS v4 provides the following align-items utilities: `items-start` maps to `align-items: flex-start;`, `items-end` maps to `align-items: flex-end;`, `items-end-safe` maps to `align-items: safe flex-end;`, `items-center` maps to `align-items: center;`, `items-center-safe` maps to `align-items: safe center;`, `items-baseline` maps to `align-items: baseline;`, `items-baseline-last` maps to `align-items: last baseline;`, and `items-stretch` maps to `align-items: stretch;`.

items-end-safe and items-center-safe are new 'safe' alignment utilities

Tailwind CSS v4 introduces 'safe' alignment variants for align-items: `items-end-safe` (align-items: safe flex-end;) and `items-center-safe` (align-items: safe center;). These use the CSS 'safe' alignment keyword, which prevents items from being aligned in a way that pushes them out of view/overlapping when there isn't enough space, falling back to start alignment in overflow situations.

items-baseline-last utility

The `items-baseline-last` utility applies `align-items: last baseline;`, aligning flex or grid items so that their baselines align 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/description block with a domain link in a card layout.

align-items responsive design pattern

Align-items utilities in Tailwind CSS v4 can be applied conditionally at different breakpoints by using variant prefixes like `md:`, e.g. a default class of `flex items-stretch` combined with a featured responsive class `items-center` (used as `md:items-center`) to change alignment at the medium breakpoint and up.

place-items utility classes reference

The place-items utilities control how grid items are justified and aligned at the same time. Available classes are: place-items-start (place-items: start;), place-items-end (place-items: end;), place-items-end-safe (place-items: safe end;), place-items-center (place-items: center;), place-items-center-safe (place-items: safe center;), place-items-baseline (place-items: baseline;), and place-items-stretch (place-items: stretch;).

place-items-start positions items at start of grid areas

The place-items-start utility class places grid items on the start of their grid areas on both axes.

place-items-end positions items at end of grid areas

The place-items-end utility class places grid items on the end of their grid areas on both axes.

place-items-center positions items at center of grid areas

The place-items-center utility class places grid items on the center of their grid areas on both axes.

place-items-stretch stretches items along grid areas

The place-items-stretch utility class stretches items along their grid areas on both axes.

place-items supports responsive design

The place-items utilities support responsive design modifiers, allowing different placement behavior at different breakpoints.

Give your agent this brain