Step 1: Name your anchor

.trigger {
anchor-name: --menu;
}

Step 2: Connect and position

.popup {
position: absolute;
position-anchor: --menu;
position-area: block-end span-inline-end;
}

The popup now tracks the trigger.

Tooltips. Dropdowns. Popovers. Context menus.

All that JavaScript you wrote to keep things in viewport? Delete it.

The platform keeps winning.

`position-area` places your element on a 3×3 grid around the anchor, where `block-end` = below and `span-inline-end` = aligned right, can grow left, etc.

Play with it interactively: https://css-tip.com/position-area/

Best part: automatic fallbacks.

.popup {
position-area: block-end;
position-try: flip-block;
}

Popup below the anchor. Not enough space? Flip it above. The browser does the math. You write the rules.

Tailwind v4’s @​utility, @​apply, and @​variant aren’t just new syntax.
Combined with :where(), they let you write semantic CSS that’s discoverable, tree-shakeable, readable, and composable.

Full write-up: https://fractaledmind.com/2026/01/02/writing-tailwind-compatible-semantic-css/

@​utility ui-badge {
:where(&) {
@​apply inline-flex items-center ...;

@​variant hover {
@​apply bg-primary/90;
}

@​variant focus-visible {
@​apply border-ring ring-ring/50;
}
}
}