Custom <select> menus are a thing now, especially because they can be progressively enhanced into. I wanted to if animating the select in was possible (and maybe stagger them in?!). Plus, I was reminiscing about the original weird iOS select UI where it had a special UI that came up from the bottom. Is that maybe… better? for thumb-reach? So let’s try that.

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.

@starting-style is a CSS at-rule that allows you to create transitions for elements that are hidden by display:none. It’s one of those things that seems simple on first glance, but turns out to be quite complex.

The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is extra powerful.

Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.