Stephen Margheim

Will release next week

Relapsing the initial version soon. Got slowed down hosting my brother in Berlin this last week. But back at it now

After 11 long years, I am finally back in a square year. Looking forward to being 36!

You can override the selector for any TW variant. For example, TW now has the hover variant use both :hover and media(pointer: fine). I always want these higher order utilities to produce the same result as if the person slapped all of these lower level utilities on the element(s). Ergo…

Ahhhh… I’m betting you have the 1Password browser extension, right? I can’t believe this isn’t fixed yet, but it is breaking syntax highlighting on every site. Was reported like 3+ weeks ago!

Aaron is one of the best educators I have ever met. I am 100% certain that this will be some of the very best content out there for harnessing AI to build, fast but with quality. I'm pre-purchasing, what about you?

Tooltips. Dropdowns. Popovers. Context menus.

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

The platform keeps winning.

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.

Alignment in Anchor Positioning using position-area An interactive demo to understand how to control the alignment using the position-area property

`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: css-tip.com/position-area/

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.

CSS Anchor Positioning is now baseline.

Firefox 147 ships today with full support. Chrome, Edge, Safari — all on board. Position elements relative to other elements. No JavaScript.

Here's the 60-second rundown...

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: fractaledmind.com/2026/01/02/...

The ui- prefix matters too. When you see .btn you have no idea what you’re dealing with. Bootstrap? Old semantic class? Random utility? `ui-badge` signals intent: zero-specificity visual pattern designed to compose with utilities.

Why this is better:
• @​utility → tree-shaking + autocomplete
• :where() → zero specificity, utilities always win
• @​variant → each state gets its own readable block
• @​apply → uses the user’s theme, not a parallel system

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

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

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

Building HTML UI forced me to figure out how to write CSS classes that integrate deeply with Tailwind v4. I want 3 things: intellisense, tree shaking, and easy utility overrides. Here’s I make it all work 🧵

How It Works (3/3)

* Opening: cubic-bezier(0.34, 1.56, 0.64, 1) — 56% overshoot for energy
* Closing: cubic-bezier(0.34, 1.18, 0.64, 1) — 18% overshoot, gentler

How It Works (2/3)

* Trigger: Inside the container (is this ok, I don't know, but it works 🤷🏻), fades/blurs out when :popover-open
* Content: Inside the container, fades/blurs in when :popover-open
* Height: Animates to auto using interpolate-size: allow-keywords

How It Works (1/3)

* Container: The popover is always visible (display: flex), acting as the morphing container
* Popover API: popover="auto" for light dismiss — click outside or press Escape to close
* Anchor positioning: Container anchors to wrapper using anchor() functions

As soon as I saw the Bloom component from Josh Puckett, I knew I had to build it with plain HTML and CSS. This one was tricky, I won't lie, but a lot of fun.

May just add this as an affordance to HTML UI, we shall see.

Affordances are a natural solution. They give us reusable visual patterns that work with any element, compose cleanly with utilities, and provide a single source of truth for how interactive elements should look.

What if you want a file input where the label looks like a button? Or a link that should look like a button? Or a summary element that should look like a button? Forgive me, but this ain't it:

<Button render={<a href="/contact" />}>Contact</Button>

Your app should have consistent visual styles for the various UI affordances so that users can build a stable mental model of how to interact with your system.

BUT, you might not want or need to use the exact same HTML structure for every UI affordance.

Buttons are those things that afford users the ability to take an action.
Selects are those things that afford users the ability to choose an option.
Dialogs afford users the ability to double check their intention.
Popovers afford seeing contextual information.
etc.

We don't need to go back to trying to come up with a semantic name for every part of our pages to nonetheless benefit from a small collection of well-named classes.

Look at the popular component kits. You'll see the same names; there's a shared vocabulary for web apps.

These are the core conceptual layers of frontend development today:

> tokens - atomic design values
> utilities - single purpose presentational classes
> components - bundled structure + behavior

I believe we are missing a layer — affordances

fractaledmind.com/2025/12/01/...

Let me know if you ever want to chat HTML and CSS on Deadcode 😉

I have some thoughts on how we can really start to delete some code by embracing the power of the modern web platform

Same olʼ <dialog>, completely new CSS.

HTML UI will have dialog sheets inspired by Silk React components.

No JS, no swipe gestures, but still gorgeous sheets with elegant animations. Just a <dialog class="ui-sheet"> away ✨

Tell me how you define surface background colors and I’ll give you a tweaked version to demonstrate

If you use _only_ an offset (like in example one), yes. The problem arises when you need to have an offset shadow. In my example, that is to create a two-part focus ring with an offset border and then a lighter ring.