Hello folks!

Big one: Tailwind Labs is joining Shopify. You've also got Wes and Scott on why StyleX is suddenly everywhere, Chris Coyier on CSS masonry that animates without a layout library, and a tiny package that drops Tailwind's design tokens into StyleX.

Let's dive in šŸ‘‡

šŸŒŸ News

Tailwind Labs is joining Shopify

Adam Wathan announced Tailwind Labs is joining Shopify. Tailwind CSS and the other open-source projects stay MIT, and the team keeps leading them with Shopify's support. New signups for Tailwind Plus and ui.sh are closing; existing customers keep their access.

With Shopify backing the project, the Insiders program is winding down. Subscriptions are cancelled so you won't be charged again, and they've packed the Insider perks into a zip you can keep forever, so check your email. Discord stays open until the end of your current billing period.

Same story for ui.sh: you won't be billed again, and the local installable skills are yours to keep. The remote MCP server will go away eventually; it was already deprecated in favor of those local skills.

New components in the shadcn ecosystem

Four registries shipped new items this week:

  • spectrumui ā€“ data-table plus 15 table blocks (payments, team, invoices, orders, customers, API keys, audit log, deployments, feature flags, tickets, analytics, market, inventory, leaderboard, and files)
  • ncdai ā€“ swipe-actions for list rows, and logos-flip for a flipping logo wall
  • beui ā€“ prediction-market-card, and range-slider-inline
  • blocks.so ā€“ dashboard-01, plus chat-03 (merged Sep 5, just after last week's scan)

OIDC UI

shadcn shipped a new OIDC UI registry with about 78 items for OIDC policy and config forms (GitHub Actions, Vercel, GitLab, Google, and form-lib variants).

šŸ¤© Windy Picks

Picmal ā€” convert and compress on your Mac

If you convert HEICs or compress a video to fit an email, Picmal does it on your Mac. Images, video, audio, and PDFs, over 100 formats, no uploads and no account.

Drop a folder in and it batch converts. You can compress without changing format, strip GPS from screenshots, split a PDF into pages, or hook the same engine into Finder, Raycast, and the CLI.

$39 once for 2 Macs. Pro is $69 for 5. 14-day refund. Mac only, Sequoia and up.

šŸ“š Learning

Why everyone is moving to StyleX

Wes Bos and Scott Tolinski dig into Meta's StyleX on Syntax #1035. Styles live in typed JavaScript objects, then the compiler extracts atomic class names at build time with zero runtime. The buzz right now is agents: structured objects and autocomplete beat hallucinated utility strings, and people like Jared Palmer, Adam Hutchinson, and Aiden Bai are saying as much. They also cover the hand-authored pain (nested selectors, waiting on modern CSS), plus Panda CSS and CSS Modules as alternatives.

Masonry (with Animation) in CSS

display: grid-lanes is landing for native masonry (Safari now, Chrome/Firefox behind a flag), but Chris Coyier is after the other Masonry.js trick: animated reflow when the column count changes. Bramus's demo does it on regular CSS Grid with repeat(auto-fill, ā€¦). The grid items stay put; a child covers each cell with position-anchor and inset: anchor(inside), then transition: inset so the content slides when the parent cell moves. One gotcha: inset: 0 wouldn't animate, because that value never changes. anchor(inside) does. Chris rebuilds the old Masonry.js demo with the floats and JS ripped out.

What You Need to Know About CSS Color Interpolation

Sunkanmi Fafowora walks through color interpolation, the path CSS takes between two colors in gradients, color-mix(), and transitions. Rectangular spaces (sRGB, lab, oklab) mix along a straight line. Polar ones (hsl, lch, oklch) walk a hue arc, and you pick the route with shorter, longer, increasing, or decreasing hue. Example: color-mix(in oklch longer hue, red, blue) or linear-gradient(in oklch longer hue 90deg, magenta, cyan). Same syntax shows up in animations between oklch stops.

šŸ’… Showcase

Ferndesk

Ferndesk is a help center that checks every article against your product, catches stale claims, and drafts the fixes for you to approve. Connect your codebase, live product, and support inbox; when a PR merges, Fern can draft the docs before release. You get a public portal, AI answers, an in-app widget, OpenAPI docs, private docs, translations, and analytics. Import from Intercom, Zendesk, and others in about ten minutes with URLs preserved. 7-day free trial, no card.

šŸŽ Resource

tailwind-stylex

If you're trying StyleX but miss Tailwind's default scale, Aiden Bai's tailwind-stylex gives you the tokens as typed StyleX constants. Install with your package manager, point your StyleX compiler at it, then pull colors, spacing, radii, and fontSizes from tailwind-stylex/tokens.stylex and use them in stylex.create. Numeric names need brackets (fontSizes["2xl"], spacing[4]). Colors, spacing, breakpoints, mediaQueries, containers, fonts, radii, shadows, easings, and more.

šŸ‘Œ Cool Stuff

Windybase ā€“ Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

EnvKit ā€“ Free local stack for Windows and macOS: nginx/Apache, PHP, databases, Mailpit, Node, and trusted .test HTTPS in one desktop app.

microcharts ā€“ Word-sized React charts (~2ā€“7 kB), 106 types, zero runtime deps, RSC-safe SVG, accessible summaries by default.

Uppy ā€“ MIT file uploader from Transloadit with resumable Tus uploads, Dashboard, image editor, and 40 locales.

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 šŸ˜.