Posts with tag tailwind

Writing Tailwind-compatible Semantic CSS

Building HTML UI forced me to figure out how to write reusable CSS classes that play nice with Tailwind. Along the way, I looked at how other libraries tackle this. Spoiler: most of them get it wrong.

Stylish <dialog>s

Campsite has some of my favorite UI styling on the web. Naturally, I cracked open their source hoping to learn something. What I found: React components rendering <div>s inside <div>s, with piles of JavaScript doing what <dialog> does for free.

So I borrowed their visual design and rebuilt it with semantic HTML and CSS using affordance classes. I want to walk you through all of the choices I’ve made and how it all comes together.

Radio Pills with Tailwind

Here is a quick tip on building “radio pills” with TailwindCSS, inspired by Scott O’Hara’s brilliant work. The goal here is to make an accessible form element that also has visual polish and purpose.¹