Hello folks!

This week is heavy on CSS fundamentals you thought you already knew. Chris Coyier makes a case for thinking about @layer horizontally instead of stacking layers, Harry Roberts explains why font-family fallbacks don't work the way you assume (and how that hurts your CLS), and Kevin Powell goes past the parent selector stuff to show what :has() can really do.

Let's dive in 👇

🤩 Windy Picks

Setapp — 270+ Mac apps, one subscription

I have been a Setapp subscribers for years now and most of my dock comes from it.

CleanShot X and Gifox handle my screenshots and GIFs, PixelSnap measures things on screen when I'm converting a design to Tailwind, TablePlus is just sublime for databases and GetAPI is great for API work. Then the background ones: iStat Menus so I can know when Cursor is eating all my ram, Lungo to keep the Mac awake while Claude Code works through a long task, PopClip and BetterTouchTool for small automations. LookAway is in there too, which some of you already know I use.

You don't pay extra for app upgrades, and most run offline after activation, so you stop tracking license keys across dozens of vendors. 7 days free.

📚 Learning

Thinking Horizontally in CSS @layer

Most of us think about @layer vertically: stack the layers, higher one wins. That model falls apart once you have 100+ components each with their own CSS file, because nobody cares whether the card beats the button. Chris Coyier suggests flipping it sideways. Give each component two pieces: the custom properties wrapped in @layer so they stay weak and easy to override, and the actual styles left unlayered and scoped with @scope, nesting, or a name-only container query. You get to override a token with a plain ui-card { --card-font: fantasy } instead of writing .root.root to win a specificity fight. He shows the setup they use at CodePen with their .module.scss files, and it's a nice mental shift if layers have ever felt like too much bookkeeping.

font-family Doesn’t Fall Back the Way You Think

Ever seen a flash of Times New Roman on your headings and wondered where it came from, even though your body font is a nice sans-serif? Harry Roberts explains why in this post: font-family fallbacks are self-contained. When you set font-family: "Open Sans" on an h1, the browser doesn't walk back up the DOM looking for the parent's stack while the web font loads. It reads that one declaration, runs out of options, and drops straight to the browser default. Beyond looking wrong, it can hurt your CLS scores if the fallback face has very different proportions than the real font. The fix is as simple as it gets: any time you declare a font-family, declare the whole stack, even if that's just adding sans-serif at the end.

:has() is more than a parent selector

You probably learned :has() as the parent selector and left it there. Its real name is the relational selector, and Kevin Powell spends this video on the parts nobody uses: selecting an element that comes before another one (:has(+ * .pink)), styling every sibling except the one that matched, and switching up a layout once a container holds four or more children. He also covers :nth-child(2 of .green), which counts elements by class instead of by tag like :nth-of-type does. One catch: you can't nest :has() inside another :has(), since that opens the door to recursion.

💅 Showcase

Orshot

Orshot is a developer-friendly creative automation platform that turns parameterized templates (built in Orshot Studio or imported from Figma/Canva) into on-brand images, multi-page PDFs, and MP4 videos via REST API, SDKs, webhooks, dynamic/signed URLs, and CLI.

🎁 Resource

Remocn

Making a product demo video means hiring a motion designer or spending a weekend in After Effects. remocn skips both with a registry of 260 MIT-licensed animation components your AI agent puts together for you. Open Claude Code or Cursor in an empty folder, paste one prompt, and a preview opens in the browser. Say what you want changed and it updates while you watch. Everything copies into your repo, so there's no runtime and no account.

👌 Cool Stuff

⭐ PikaPods – Try any open source app without babysitting a server. PikaPods spins it up in seconds, handles updates and backups, and shares revenue with the original devs. New accounts get $5 in free credit.

Micro Snitch – A lightweight Mac menu bar app that alerts and logs any microphone or camera activity.

MXroute – No-nonsense email hosting with unlimited domains/accounts, full SMTP/IMAP/POP3, 99.9%+ uptime, operator-run since 2013.

2FAS – An open-source 2FA authenticator that's easy to migrate to, with strong privacy, QR setup, backups, and no ads.

Do you want to share something with the Tailwind CSS community?
You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with this link 😁.