Stephen Margheim @fractaledmind.bsky.social · 21/01/2026Relapsing the initial version soon. Got slowed down hosting my brother in Berlin this last week. But back at it now 110
Stephen Margheim @fractaledmind.bsky.social · 19/01/2026After 11 long years, I am finally back in a square year. Looking forward to being 36! 260
Stephen Margheim @fractaledmind.bsky.social · 15/01/2026You 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… 010
Stephen Margheim @fractaledmind.bsky.social · 15/01/2026Ahhhh… 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! 020
Stephen Margheim @fractaledmind.bsky.social · 14/01/2026Aaron 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? 030
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026Tooltips. Dropdowns. Popovers. Context menus. All that JavaScript you wrote to keep things in viewport? Delete it. The platform keeps winning. 020
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026Best 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. 110
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026`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/css-tip.comAlignment in Anchor Positioning using position-areaAn interactive demo to understand how to control the alignment using the position-area property 110
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026Step 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. 120
Stephen Margheim @fractaledmind.bsky.social · 13/01/2026CSS 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... 1173
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026Tailwind 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/... 110
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026The 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. 110
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026Why 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 210
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026@utility ui-badge { :where(&) { @apply inline-flex items-center ...; @variant hover { @apply bg-primary/90; } @variant focus-visible { @apply border-ring ring-ring/50; } } } 110
Stephen Margheim @fractaledmind.bsky.social · 12/01/2026Building 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 🧵 140
Stephen Margheim @fractaledmind.bsky.social · 10/01/2026How 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 000
Stephen Margheim @fractaledmind.bsky.social · 10/01/2026How 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 100
Stephen Margheim @fractaledmind.bsky.social · 10/01/2026How 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 100
Stephen Margheim @fractaledmind.bsky.social · 10/01/2026As 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. 1100
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026Affordances 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. 000
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026What 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> 100
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026Your 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. 110
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026Buttons 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. 100
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026We 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. 100
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026These 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/... 120
Stephen Margheim @fractaledmind.bsky.social · 09/01/2026Let 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 010
Stephen Margheim @fractaledmind.bsky.social · 08/01/2026Same 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 ✨ 1160
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026Tell me how you define surface background colors and I’ll give you a tweaked version to demonstrate 000
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026If 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. 100
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026"Why does this matter?" you ask. Because "fancy" focus styles that use both a `ring` and an `outline` with an offset need a way to make the offset region look transparent, and yo can't simply use `transparent`. You need to know the surface color. play.tailwindcss.com/MTO1Wfq8qK 110
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026We also use `--value(--color-*, [color])` to be sure we can pass both theme values (like `bg-zinc-800`) and arbitrary values (like `bg-[#fefefe]`). 000
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026So even if there are many ancestors with different background colors (body, card, section), the button will know its surface because its nearest ancestor gets to set the final value of --button-surface-color seen by .ui-button 200
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026We use a descendant selector `& .ui-button` to ensure that adding a bg-* utility directly to a .ui-button element doesn't override the surface property value. And the way that CSS properties inherit means that this value will be set by the button's nearest ancestor. 110
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026In this case, we don't need to define styles, just set a CSS property. We want elements with a bg-* background color to pass that value down to their nearest .ui-button descendant. This allows the .ui-button element to know its surface color. 100
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026You can "hook into" Tailwind's provided utilities by defining your own @utility definitions that mirror the Tailwind signature. In this case, I define a functional utility for background colors. Tailwind will generate its styles for this utility _as well as_ your styles. 100
Stephen Margheim @fractaledmind.bsky.social · 06/01/2026I just solved the problem of having button's shadow stack include an offset outline that "magically" adapts to any surface color that the button is on 🤯 ``` @utility bg-* { & .ui-button { --button-surface-color: --value(--color-*, [color]); } } ``` Explanation in 🧵 130
Stephen Margheim @fractaledmind.bsky.social · 05/01/2026Agents excel in a cohesive system—one that is internally consistent, free minimal external dependencies, and token efficient. Using declarative HTML with a CSS library of affordances built on Tailwind is the *ideal* environment for a Claude Code or Codex or the like. 000
Stephen Margheim @fractaledmind.bsky.social · 05/01/2026Which of these buttons do you like more, and why? Each has a subtle 3d effect, but done in three different ways. Shown here at 1x, 2x, and 8x. 600
Stephen Margheim @fractaledmind.bsky.social · 04/01/2026Who's building a design system or component kit using Tailwind, fully leveraging its features? Others must be doing more than just applying styles. I'm creating custom utilities, modifying built-ins, adding layers, and defining properties. If you’re doing the same, let’s connect. 340
Stephen Margheim @fractaledmind.bsky.social · 04/01/2026If you button component styles can't work on input[type=submit] or input[type=reset], where ::before/::after pseudo-elements aren't present, then you have an undercooked component IMO. So, a challenge for HTML UI has been getting the subtle 3d effect I want without pseudos. 110
Stephen Margheim @fractaledmind.bsky.social · 03/01/2026Before reaching for a tab library, ask: is this really a tab interface? Or is it content that could just... be on the page or navigated to on another page with shared structure and styling. 040
Stephen Margheim @fractaledmind.bsky.social · 03/01/2026Since that's all you need, simpler patterns exist: 1. Anchor links + scroll-snap: Just link to sections. CSS handles the rest. 2. <details> elements with [name] attr: Accordion pattern. Native, accessible, less complex. 3. Just… show everything. 4. Just… put it on another page. 120
Stephen Margheim @fractaledmind.bsky.social · 03/01/2026The classic tab pattern: - Row of buttons - Click to show/hide panels - ARIA roles (tablist, tab, tabpanel) - Arrow key navigation - Roving tabindex That’s a lot to show one section at a time and let users switch. 120
Stephen Margheim @fractaledmind.bsky.social · 03/01/2026A hot take after seeing yet another fancy tabs design: the classic "tab component" is over-engineered for 90% of use cases. You probably don't need it... 1135
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026The pattern is quite flexible as well. Here's I've made a more traditional "tabs" interface, but again with *only* HTML and CSS. Even I get surprised at what is possible today with #StylishHTML 130
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026I genuinely thought such a component required JS. After a day of tinkering, turns out I was wrong. This is a 100% plain HTML and CSS "card tabs" component built with <details>, container queries, and absolute positioning. 140
Stephen Margheim @fractaledmind.bsky.social · 02/01/2026DaisyUI, Pico CSS, Water CSS, Graffiti CSS. There are a handful of pure CSS libraries, yes. But they are all missing some key features I think are essential to building a “bodiless component kit”. Will probably be able to explain more once I release the initial version 100
