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 ✨

"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

I 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 🧵

Agents 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.

Which 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.

Who'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.

If 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.

A 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...

I 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.

There are two types of developers: “Least power devs” — What’s the simplest tool that solves my problem today? “Maximum optionality devs” — What tool handles every problem I might have in 5 years? I know which camp I’m in.

Everyone knows “headless” UI libraries that offer behavior without styles. BYOCSS. But we’re missing the inverse: “bodiless” UI. Styles without behavior. You bring the HTML. Here’s why we need both…

Component libraries bundle JS behavior, CSS styling, and DOM templating. Most of the time I just want one, not all three. Headless libraries solved "behaviors only, no styles." I can't find any "bodiless" libraries offering styles only, no behaviors. So I'm making HTML UI...

Stop using rating libraries. I've created a CSS-only star rating component with half-star support in just 60 lines. No JavaScript. Fully accessible. Smooth hover interactions. Here’s how it works: 🧵

Yes, yes it is. Join us. businessclasskit.com/blog/rails-...

Wild looking back at this year. So much has changed, so much has stayed the same. But one of my absolute favorite years ever. fractaledmind.com/2025/12/31/...

Stop using <select multiple> for "select many" UI. It's the worst form control in HTML. Luckily, there is a better pattern, and it isn't difficult or weird...

Amdahl's Law hits hard: Postgres plummets from 13k to 660 TPS with just 10ms latency in serializable transactions. Adding hardware won't help; the network bottleneck remains. SQLite avoids this with its embedded nature, achieving 100k+ TPS on a laptop. 🔥 andersmurphy.com/2025/12/02/...

Plain HTML and CSS can be beautiful. Stay tuned 👀

After building a full CSS tree system, I wanted to push it further with two experiments: 1. Folder-style stacked trees 2. Mixed orientations in the same tree Here's what I learned: 🧵

Alongside the Ruby 4.0 release last week, I published charm-ruby over Christmas, bringing @charm.land's excellent terminal UI libraries to Ruby. A full TUI framework, reusable components, styled output, forms, markdown rendering, spinners, charts, and a lot more! Demos below ⬇️

Tournament brackets. Org charts with a CEO in the middle. Decision trees that branch both ways. These need CENTERED trees — children on both sides of the parent. Here's the CSS trick: 🧵

CSS cascade layers are the most underrated feature of modern CSS. They're why semantic classes work now when they failed before. Here's the 2-minute explanation:

CSS trees can flow in any direction. Sure, → left-to-right and ↓ top-to-bottom are most common, but a good tree component needs to support ← right-to-left and ↑ bottom-to-top as well Building on our previous foundations, just one property change for each. Here's how: 🧵

Yesterday I showed how to build horizontal tree structures with just plain HTML and CSS. Today: vertical trees (org charts, family trees, decision diagrams). And the lovely detail is that it only takes one key change to make it all work: 🧵

Org charts, file trees, tournament brackets—all with pure CSS. No canvas. No SVG. No JS. Just flexbox and pseudo-elements. Let's break it down, starting with the foundational left-to-right tree, where only a couple dozen lines of CSS can transform this ... into this ... 🧵

If you're going to write semantic CSS classes in 2025, don't call them .btn or .card. Use a ui-* prefix: ui-button, ui-input, ui-badge. Here's why naming matters more than you think...

Your app/design system needs a .button class before it needs a <Button/> component. We need to be able to compose behaviors and appearance as needed. A <label> might need to look like a button, or <summary>, or <input type=radio> Visual affordances deserve their own primitive.

👀 Sneak peek of a 100% plain HTML and CSS component I'm building for my next project. I'll give a full behind-the-scenes tour of the project to the first person that comments with the correct essential implementation details driving this "card tabs" component.

Have an SVG with stylized text? Want to make the stylized text selectable? Add a <text fill=transparent> node with the corresponding text. We can have nice things that are usable too!

Designer-quality dialogs with zero JavaScript 👀 Borrowed the visual design from Campsite, but built with native <dialog> and pure semantic HTML and CSS. Full walkthru at: fractaledmind.com/2025/12/18/... Check it

The web platform has supported keyboard shortcuts for over a decade! Say hello to criminally overlooked `accesskey` attribute. Add it to an interactive element like a button, link, or input so users can fire its default action via keyboard shortcut, no JS required!

I spent way too long perfecting animations for my post on crafting stylish <dialog>s. So, I compiled all my mistakes so you can nail it on the first try. Check it out or pass it along to your coding agent 😉 fractaledmind.com/2025/12/19/...

`popover` & `popovertarget` give you dropdown menus w/ light-dismiss for free. <button popovertarget="menu">Options</button> <nav id="menu" popover> <ul> <li><a href="/settings">Settings</a></li> <li><a href="/profile">Profile</a></li> </ul> </nav> #StylishHTML

I'm crafting a novel tool that uses keyboard usability as the ultimate test for page accessibility, while also diving deep into the a11y tree. Excited seeing it take shape! 👀

Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element. nav > ol > li:not(:last-child)::after { content: " / "; color: lightgray; padding: 0 0.5em; } The `:not(:last-child)` ensures no trailing separator after the final item. #StylishHTML

Today's <dialog> elements are your newest secret weapon—simple and powerful. In my latest post, I'll guide you through creating sleek, thoughtful UI with this full-featured, native hero. Dive into the future of stylish <dialog> experiences: fractaledmind.com/2025/12/18/...

I think @trycampsite had some of the most elegant UI on the web, especially for modal dialogs, but it was all React components rendering <div>s inside <div>s. So I stole their design and rebuilt it with semantic HTML and CSS. 😅 fractaledmind.com/2025/12/18/...

SVG icons have been "solved" myriad ways, but I find them all lacking. Inline SVGs? Bloated DOM. <img> tags? Can't change colors. Icon fonts? Blurry at certain sizes, a11y issues. CSS background-image? Still can't change colors. But, today there's actually a perfect solution...

The Tailwind community has become too dogmatic about utility-only. Tailwind is utility-FIRST, not utility-ONLY. And @​utility and @​apply are criminally underused. And here is why this matters...

🌶️ #nobuild is a solo developer philosophy masquerading as universal advice. The append-only CSS problem that drove teams to Tailwind? Nobuild doesn't solve it. It ignores it. Let me make the case for #lowbuild instead...

Tab testing doesn’t find accessibility issues. It finds usability issues that happen to block keyboard users first. Broken focus order, invisible states, unreachable controls—these aren’t “accessibility bugs.” They’re just bugs. Keyboard users hit them before anyone else notices.

Tab through any site for 30 seconds and you’ll know more about its real accessibility than an hour with a linter. Focus disappears? Problem. Can’t reach the nav? Problem. Trapped in a modal? Problem. It’s a stress test for your whole UI in one keystroke.

Your accessibility audit says you’re compliant. Your keyboard users can’t complete your signup flow. These aren’t contradictory. We’ve just been measuring the wrong thing.

Accessibility tools ask “does this image have alt text?” The actual question is “can someone navigate your interface?” One is compliance. The other is usability. We’ve been testing the wrong thing.

I cloned @laravel.com's Cloud breadcrumbs as a simple <nav> with <a> links and [popover]s. If you'd like to see a video walkthru of how exactly I built this, let me know. I've been considered resurrecting my YouTube channel and sharing more videos here. Would you watch? #StylishHTML

Try this: Tab through your homepage without touching your mouse. Can you tell what’s focused? Can you reach the main CTA? Can you get back out of the menu? That 30-second test tells you more than your lighthouse score ever will.

The fastest accessibility audit: Tab through your site. Where does focus land? Can you see it? Can you reach everything? Can you escape that modal? Your linter can’t answer these. They’re also the only questions that matter.

This is the page it built base on that simple prompt. Yes, I tailored it with specific inspiration and specific base HTML. But this is so much better than I ever expected. See the full page link in the quoted post.

The prompt: Here are three of my favorite landing pages that use the TUI aesthetic: * openstatus * turbopuffer * planetscale screenshots attached. I want you to redesign the HTML I've attached to get something that both feels unique and familiar with these. ➡️ gemini.google.com/app/f1ee065a...

I used Gemini yesterday for some design work, and I have to say, it was astounding. Does it produce _exactly_ what I want in one-shot? Absolutely not. But I got me into editing mode and past the blank canvas immediately, and its suggestions and aesthetic were remarkable.