Hello folks!

Trying out a new community news section starting this week to highlight all the cool projects in the ecosystem. I hope you like it šŸ˜„

You also get Adam Argyle on CSS infinity, Ahmad Shadeed on the lh unit, and TailMotion, a motion library that speaks Tailwind.

Let's dive in šŸ‘‡

šŸŒŸ Community News

Preline 5.0

Preline 5.0 landed with a hosted MCP server, per-block AI prompts, and animated icons. Your coding agent pulls real Preline markup through components_list and single_block. MCP and animated icons are Pro-only. The open-source package also moves to Tailwind v4.3.

Maizzle 6.1.2

Cosmin shipped Maizzle 6.1.2. Tailwind source scanning now follows each template's import graph, so unused components stop leaking CSS into the email. Set css.scopedSources: false if classes live in files Maizzle can't trace. Windows paths and Vite virtual modules got fixes too.

shadcn CLI 4.19.0

The shadcn CLI hit 4.19.0 with private GitHub registries. If you can read the repo, pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit works. If you're already on gh auth login, the CLI uses those credentials and never sees the token. CI can pass GH_TOKEN. August also added Questionnaire for Base UI, React Aria, and Radix.

New components in the shadcn ecosystem

Six registries shipped new items this week:

  • react-bits ā€“ CRTWarp, GlowCursor
  • ncdai ā€“ Status Button for loading and success states on async actions
  • beui ā€“ Expandable Control, Metallic Button, and File Tree
  • Inspira UI ā€“ HTML in Canvas
  • Zard UI ā€“ Hover Card + Typeset
  • lucide-animated ā€“ animated palette icon

tailwind-stylex 0.1.1

Aiden Bai shipped tailwind-stylex 0.1.1. It publishes Tailwind's default design tokens as typed StyleX constants, so you import colors, spacing, and radii and use them in stylex.create: colors.stone100, radii.lg, spacing[4]. Numeric names like fontSizes["2xl"] use brackets. If you're on StyleX and miss Tailwind's scale, this is the bridge.

šŸ¤© 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

CSS Infinity Use Cases

If you've typed border-radius: 9999px or 1e9px to get a pill, this one's for you. Adam Argyle walks through CSS infinity and -infinity. You wrap it in calc(), and for a length you multiply by a unit: border-radius: calc(infinity * 1px). The same pattern maxes out z-index at the browser int limit, or freezes an animation long enough to inspect a view transition. He flags that the infinite box-shadow backdrop trick doesn't work. Steal the pill radius.

The CSS lh unit

The lh unit is the element's line-height as a length. Ahmad Shadeed uses it for spacing that tracks the text. Swap margin-bottom: 1rem for 1lh and the gap between paragraphs follows the type, even if you change the font size. Same idea for a paper-line background (background-size: 100% 1lh) and a faded list capped at max-height: 5lh. He sizes icons with 0.8lh so they grow with the button label. A float demo uses round() plus lh to snap an image to the nearest line. After that, px spacing next to body copy looks wrong.

5 CSS Properties You Should Know for Better Text Designs

Preethi Sam has five text tricks you can layer in. background-clip: text (now in the background shorthand) plus color: transparent fills letters with an image. vertical-align lines up inline stuff on a line of text. align-content: center centers copy in a box. box-decoration-break: clone keeps borders and radius on wrapped lines. letter-spacing can hide-then-reveal a word. text-combine-upright: all keeps a bit of horizontal text inside writing-mode: vertical-lr. Each one has a CodePen.

šŸ’… Showcase

VerifyKit

VerifyKit is an email verification API. One call does real SMTP checks, catches typos, blocks disposable addresses, and can send email OTP, so fake signups don't hit your database. Response time sits around 200ms, with SDKs for Node, PHP, Go, Python, and Rust. Pricing starts at $0.001 per validation. If you've been rolling your own "is this email real" check, this cuts that work.

šŸŽ Resource

TailMotion

If you're a Tailwind lover like me, you've faked a motion system with a pile of animate-* classes. TailMotion sits next to your utilities instead. npm install tailmotion, @import "tailmotion/css", then tm-press on a button. Set a personality on a parent (tm-motion-calm, tm-motion-productive, tm-motion-expressive) and every descendant retunes. Presence reads data-state or aria-expanded with no runtime. Native dialog and popover get real exits. Scroll reveals use view timelines, so unsupported browsers still show the content. Docs and a live explorer are on the site.

šŸ‘Œ Cool Stuff

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

Outline ā€“ Open source team wiki, cloud or self-hosted, with realtime docs and Slack search.

webclaw ā€“ Scraping API that turns a URL into LLM-ready markdown or JSON. Open-source Rust core, Firecrawl-compatible.

OpenLogi ā€“ Local-first Logitech Options+ alternative in Rust. Remap buttons over HID++, no account, no telemetry.

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