Tailwind Weekly #239: The future of CSS, native masonry, and copy-paste microinteractions β¨
Hello folks!
This week, Josh W. Comeau shares his top 10 picks for Interop 2027, Saleh Mubashar builds native masonry with CSS grid lanes, and Ben Schwarz measures how far ahead browsers fetch lazy images.
Let's dive in π
π Community News
daisyUI 5.8.0 β Paged menus now have transitions that respect reduced motion. Join sets the radius for its items, Megamenu styles plain links as menu items, and you can turn off the :root:has() selectors.
Preline 5.1.0 β Adds a Changelog Timeline block, plus a Today button and close-on-select in Advanced Datepicker. Advanced Select gets optionValueAsTitle and a fix for an HTML injection bug.
eslint-plugin-better-tailwindcss 4.11.0 β The selectors option can now add to the defaults instead of replacing them. Class sorting is also stricter about duplicates and numbers.
π€© Windy Picks
Understand anything, get things done.
Your agent wrote it. Now understand it. Hold fn on your Mac and ask DuckyHelper about the code on your screen. It explains out loud and draws the steps on screen or a blackboard, then asks you to try the next step. For Apple silicon Macs with macOS 14+. The Agent preview in the kit is coming soon.
π Learning
The Future of CSS: my top 10 picks for Interop 2027
Interop is where Google, Apple, Microsoft and Mozilla agree on what to make work in every browser, and the 2027 list is open for votes. Josh W. Comeau walks through his top 10, from CSS functions and corner-shape to anchored container queries, reading-flow and gap decorations. Many of them already work as progressive enhancements, and he asks you to rank your own picks.
Native masonry layouts with CSS grid lanes
Saleh Mubashar shows how display: grid-lanes gives you masonry without measuring item heights: you define the columns and the browser drops each item into the best lane. He covers spanning items, brick layouts, subgrid inside cards and the fit-tolerance property. It only works in Safari 26.4+ for now, so plan a fallback.
Lazy loading images: how loading="lazy" and eager work
Ben Schwarz tested how far ahead each browser starts fetching loading="lazy" images. Chrome scales the distance with connection speed, Firefox uses a fixed 600px, and Safari loads about a viewport ahead. Keep your LCP image eager with fetchpriority="high", and give lazy media a width and height.
π Showcase
Phone.inc
Phone.inc puts a separate business number on your own iPhone or Android, so work calls land in its app and your personal number stays private. It adds business hours routing, a spam filter, call transfers and an AI receptionist (in beta) for missed calls. It hooks into tools like Shopify, HubSpot, Calendly and Stripe, with an API and MCP support. The free plan covers one person and one number, and access is by waitlist for now.
π Resource
MicroKit UI
MicroKit UI is a free, MIT-licensed set of 55 copy-paste microinteractions: animated buttons, hover effects, tabs and inputs. Each one comes in a CSS and a Tailwind version (v4 supported), in TypeScript or JavaScript. 27 of them have no dependencies, and the rest only add lucide-react for icons. You can also install them with the shadcn CLI, and most work as server components in the Next.js App Router.
π Cool Stuff
RenderPixels - Render Tailwind/HTML into OG images, social posts, banners, favicons, and logos, right from any AI that accepts MCP. First 50 renders are free.
Cloudup β Share video, photos, music, links and files in one stream, with drag-and-drop uploads and screenshot capture.
BatFi β A battery charge limiter for Mac that stops charging at the level you pick, from 50% to 100%, and can switch limits by time and location; $15 once.
MFlare β A macOS menu bar app that shows your Cloudflare usage quotas and pings you when builds and deploys finish; free for one account.
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 π.
Discussion