Tailwind Weekly #237: JS-free tooltips, JPEG XL vs AVIF, and motion-first shadcn components 🎯
Hello folks!
This week, CSS takes over tooltip positioning, Jake Archibald puts JPEG XL up against AVIF, and Eased brings 70 free animated components to shadcn.
Let's dive in 👇
🌟 Community News
tailwind-variants v4.0
tailwind-variants 4.0 ships its own class conflict engine, so tv, cn and twMerge all run on it and you can drop tailwind-merge. It also exports drop-in twMerge, twJoin and clsx, so you can alias both packages to it. The maintainers measured hot tv() calls at 1.6 to 2x faster than 3.3.1, and cn() at up to 3x faster. The migration guide is in the README.
Wind 1.10
Wind, the Tailwind-style utility layer for Flutter, shipped two releases this week. 1.10 adds object-* position classes to WImage and a decimalSeparator option for comma-decimal locales. 1.11 adds wWindowClassOf(), which checks the window width against your theme's md and lg breakpoints and returns compact, medium or expanded, so iPad split view gets the right layout.
shadcn CLI 4.23 – shadcn mcp moves to MCP TypeScript SDK v2 and supports MCP protocol 2026-07-28. If you embed shadcn/mcp, switch setRequestHandler calls to registerTool.
New components in the shadcn ecosystem:
- ReUI – Data Grid Advanced 14–16 and Base 9, analytics-style grids with in-cell charts, KPI rollups and tree view
- Aceternity UI – Fluid Notch, Paper Plane Send, Paper Plane Globe, Image Wave
- beUI – Line Chart, Bar Chart, Sparkline, Sankey Chart
- assistant-ui – Context Display and Attachment state elements
- shadcnblocks – 20 new Coverflow and Gallery blocks, mostly Pro
🤩 Windy Picks
Mirror: an editorial theme for Ghost
Mirror is an editorial Ghost theme for essays, magazines and paid newsletters. It lays out your front page as you publish, adds a numbered contents list to long reads, and builds the paywall and membership page from the Tiers you already set in Ghost, so there's no code to touch. Readers can switch between light and dark mode, and the demo scores 95 on PageSpeed desktop. It's a one-time $59 for unlimited sites with lifetime updates, and the first 25 buyers get $10 off with code LAUNCH.
Mirror is my first Ghost theme, after years of making HTML templates that people have downloaded 9,800+ times on Gumroad.
📚 Learning
JPEG XL vs AVIF for web use-cases
JPEG XL now ships in every major browser, so Jake Archibald tested it against AVIF with today's encoders. He compares photos, screenshots, transparency, encode and decode cost, progressive loading and HDR. Read it before you pick a format for your next image pipeline.
CSS does your tooltip positioning now
If you've built a tooltip, you've written the getBoundingClientRect() math and then patched it for scroll, resize and viewport edges. Matt Smith shows how anchor-name, position-area and position-try-fallbacks hand that job to the browser, then builds a JS-free dropdown with popover and anchor-size(). He also covers the catches, like why screen readers don't follow the visual link.
5 CSS fouls that I see way too often
Kevin Powell calls out five CSS habits he keeps finding in other people's code. Count how many you've committed this month.
💅 Showcase
Superfocus
Superfocus is a productivity app co-founded by Ali Abdaal. It plans your goals in 90-day seasons, time-blocks your week against Google, Apple or Outlook calendars, and blocks distractions while you work. An AI coach checks in daily and weekly and tells you whether each goal is on track or at risk. It runs on web, Mac and iOS.
🎁 Resource
Eased
Eased is a library of animated React components for shadcn, built on Tailwind CSS v4 and Motion. You get 70 free components under MIT, and the shadcn CLI installs them from its registry so the source lands in your project. Every component respects reduced motion and supports light and dark mode. For agent workflows, it ships an MCP server for Claude Code, Codex, Cursor and VS Code, plus Markdown docs and llms.txt files. Pro adds 34 showpiece blocks for a one-time $149 early-bird price.
👌 Cool Stuff
Windybase - Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.
Snapzy – A free, open-source macOS screenshot and recording app with scrolling capture, annotations and on-device OCR.
lazydocker – A terminal UI for Docker and docker-compose that shows containers, logs and metrics in one window.
HealthLog – A self-hosted health tracker that puts Apple Health, Oura, WHOOP and manual entries on one timeline on your own server.
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 😁.
