Hello folks!

This week's issue is heavy on pure CSS. We've got overflow: clip and why it's probably what you wanted instead of hidden, the new progress() function that kills a few media queries, and a list of ~30 visual design rules you can apply without second-guessing yourself.

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

Practical Use-Cases for overflow: clip;

If you've been reaching for overflow: hidden all this time, you might be surprised to learn it creates a scrollbox, which means hiding overflow on one axis also cuts off the other one. Zoran breaks down the difference between hidden and clip, shows how clip only cuts the axis you actually tell it to, and even demos how a container with overflow: hidden can still be scrolled programmatically. He also covers a practical case you've probably run into: a hero image that needs to spill out the bottom without introducing horizontal scrollbars. Good news is overflow: clip is Baseline, so you can use it today with no fallbacks needed.

The new progress() function in CSS

CSS keeps taking over things we used to hand off to JavaScript, and progress() is a good example. It takes a value plus a start and end bound, then returns a number between 0 and 1 telling you how far along that range you are. The nice part is it works across mixed units, so progress(100vw, 480px, 1200px) is valid, something calc() can't do. Amit's article walks through the syntax and shows practical snippets like fading a hero image as the viewport narrows and scaling a card up slightly on bigger screens, both without a single media query. He also lists a bunch of other use cases: fluid typography, scroll-driven animations, theme transitions with color-mix(), and data-driven styling from custom properties. Support is in Chromium and Safari 26, with Firefox still pending, so keep a clamp() fallback around for now. There's a CodePen in the article if you want to poke at the examples.

Visual design rules you can safely follow every time

Anthony Hobday put together a list of around 30 visual design rules you can apply without overthinking them, and it's the kind of thing every dev who builds UI should have bookmarked. The rules are specific and actionable: use near-black and near-white instead of pure black and white, saturate your neutrals with a bit of your accent color, make drop shadow blur values double their distance values, keep outer padding equal to or larger than inner padding, and set nested corner radii to the outer radius minus the gap between them. Each one gets a short explanation of why it works, and most come with a side-by-side example showing the wrong way and the right way. If your designs ever feel slightly off and you can't figure out why, this list will probably tell you.

💅 Showcase

thinkmill

Thinkmill is a software design and engineering consultancy based in Sydney with a team of 35+ designers and engineers. They specialize in design systems (they've worked on Atlassian's, Reckon's and the Australian Government's), product development, API platforms and applied AI. You might also know them from their open source work: Keystone, Keystatic, React Select and Changesets all come from this team.

🎁 Resource

MDN MCP server

Your coding agent will tell you a feature has no Firefox support when Firefox shipped it three months ago. MDN built an MCP server that feeds its docs and browser compatibility data to the agent instead, and it works with VS Code, Zed, Cursor, Claude Code, Codex CLI and Claude Desktop. MDN tested Claude Code on four features from Firefox 151: without the MCP it got browser support right once out of four, and insisted Firefox had no plans for the Web Serial API, which shipped in May. Still experimental, but the setup takes a minute!

👌 Cool Stuff

⭐ PikaPods – The fastest way to try open source apps: PikaPods launches them in seconds and takes care of updates and backups after. Revenue is shared with the original devs, and you get $5 in free credit to start.

Shipmail – All-in-one email, calendars, newsletters, bookings, AI assistant, and API for agents on your own domain, from $4/mo.

ntfy – Send push notifications from your app or script via HTTP, subscribe by topic, and get desktop alerts instantly.

Kap – An open-source screen recorder for macOS that exports to GIF, MP4, WebM, or APNG.

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