Hello folks!

This week, Igor Luchenkov diffs a Tailwind v3 to v4 upgrade pixel by pixel, Craig Abbott does the maths on heading sizes, and Mystic Coders walks you through how passkeys work.

Let's dive in πŸ‘‡

🌟 Community News

Tailwind CSS v4.3.4 and v4.3.5

Two releases this week. v4.3.4 adds @tailwindcss/turbopack, a Turbopack loader for Next.js, to the changelog and fixes @scope variant handling, a @tailwindcss/vite crash in bundledDev, and macOS 27 killing the standalone binaries. v4.3.5 follows with more fixes: canonicalization is faster with big matchVariant plugins, color-mix() without an interpolation method no longer crashes, the WASM build stops hanging in WebContainers, and HTML comments between CSS rules are ignored instead of breaking the build.

New components in the shadcn ecosystem:

  • Aceternity UI – fluid-notch, paper-plane-send, paper-plane-globe, image-wave and 11 more
  • ReUI – new data-grid-advanced and data-grid-base variants, and 7 more
  • beUI – line chart, bar chart, sparkline, sankey chart and 1 more
  • assistant-ui – context display and attachment state elements
  • SVGL – new logos for pi, Radius, Cockroach Labs and Logbrew
  • Kokonut UI – AI pieces like ai-inline-edit, ai-message-queue, ai-redact, ai-memory and 18 more
  • Shadcn Blocks – coverflow24 to 27 and 18 more
  • HextaUI – sidebar-app-shell

🀩 Windy Picks

A Markdown document open in Glance on macOS

Glance: a native Markdown viewer and editor for Mac

Glance opens your .md files in real typography and draws Mermaid diagrams, LaTeX, tables and code natively, with no WebView. You can open a whole folder as a sidebar of notes, or press space in Finder to preview any file with Quick Look. Reading is free forever. A one-time $9.99 Pro license lets you edit on the rendered page or in a source pane beside it, on up to three Macs. It needs macOS 14 and an Apple Silicon Mac.

If you read a lot of READMEs and project docs, Glance gives you a cleaner view of them than raw text in your code editor.

Get Glance and use code TAILWIND for 20% off Pro

πŸ“š Learning

Visual regression testing for a design system migration

Visual regression testing for a design system migration

Igor Luchenkov ran npx @tailwindcss/upgrade on a 12-page Tailwind v3 storefront and diffed every page with Playwright and pixelmatch. The upgrade tool missed three deprecated opacity classes, and a loose diff threshold hid an icon that lost its opacity. He ends with a six-step process for your own migration, from taking baselines to grepping for removed utilities.

Using maths to balance your heading styles

Craig Abbott builds six heading levels from one modular scale, with a 1.5 ratio and a 1.2rem base. He leans on size first, then spacing, then weight, and skips color, italics and caps for accessibility. For h4 he uses the geometric mean with sqrt() to land it between its neighbors.

How do passkeys work

Mystic Coders walks through the registration and sign-in flows step by step, from the server's challenge to navigator.credentials.create() and get(). You'll see why a lookalike domain can't use your passkey, and what passkeys don't protect, like a stolen session cookie or weak account recovery.

πŸ’… Showcase

Subfaro

Subfaro tracks your subscriptions in one place and warns you before a free trial or renewal charges, with no bank login. It flags price hikes, splits shared plans so only your share counts, and links a cancel guide for each service. The free plan covers up to 10 subscriptions, and Pro costs $24.99 a year. It runs on the web, Android and as a Chrome extension, with an iPhone app on the way.

🎁 Resource

react-image-editor

Unlayer's react-image-editor wraps the Unlayer Image Editor in a React component you install from npm. You get eight tools out of the box (crop, resize, filter, draw, text, shapes, stickers and frames), and you can switch any of them off. An onSave callback hands you a data URL and a Blob, and ref methods let you reset the image, check for changes or update options. It needs React 18+, ships with 'use client' for the Next.js App Router, and bundles 10 locales. It's MIT licensed, and the optional AI Assistant needs an Unlayer account.

πŸ‘Œ 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.

Jog – GitHub Actions runners for private repos at $0.0012 a minute for 2 vCPUs, with 5,000 free minutes a month; you switch by changing one runs-on line.

Handy – A free, open-source speech-to-text app: press a shortcut, speak, and it pastes the text, with your audio staying on your computer.

Ship That Code – A free learn-to-code site where you rebuild real systems like Redis, Git and a compiler, with 1,900+ graded exercises.

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