Hello folks!

We got a new Tailwind CSS update and a fantastic video from Steve about his workflow for designing with AI.

Let's dive in 👇!

🌟 News

Steve breaks down how he designs with Claude Code

Steve Schoger shared an awesome deep-dive video where he walks through his entire workflow of using Claude Code as a primary design tool to build a marketing page from scratch. He covers a ton of practical design tips along the way, like using low-opacity gray-950 rings instead of solid borders to avoid that muddy shadow effect, leveraging Inter's variable font for in-between weights like 550, using the ch unit for more flexible text widths, and adding a "canvas grid" border treatment (à la Stripe) to make a site feel more polished without custom graphics.

At the end, he teases ui.sh and says that early users are in and a wider release is coming soon!

Tailwind CSS now supports Vite V8

We got a new update that adds official support for the latest Vite V8 version released last week plus some minor bug fixes and performance improvements.

🤩 Windy Picks

Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick 3-minute form and receive a tailored quote within 24 hours.

📚 Learning

The Value of z-index

If you've ever worked on a large project, you know the z-index "arms race" all too well, developers slapping on values like 9999 or 10001 just to make sure their element stays on top. This excellent article by Amit Sheen tackles that exact problem and proposes a clean, token-based system using CSS custom properties to manage your z-index values in one place. He walks you through setting up global layer tokens (like --z-toast, --z-popup, --z-overlay), using calc() to bind related elements together, and even introduces local tokens (--z-top, --z-bottom) for managing layers inside components. There's also a bonus at the end — a library called z-index-token-enforcer that provides Stylelint, ESLint, and CLI tools to make sure no one sneaks in magic numbers.

The Fundamentals of CSS Alignment

Temani Afif put together an incredibly thorough exploration of how CSS alignment actually works across grid, flexbox, and block layouts. He breaks down the two levels of alignment (content vs. item), explains why normal behaves differently depending on the layout, and clears up long-standing confusion like why align-content doesn't work without flex-wrap: wrap or why justify-self is ignored in flexbox.

Error.isError(): A Better Way to Check Error Types in JavaScript

Trevor Lasn walks you through the new Error.isError() method, which uses an internal marker (think of it like a manufacturer's watermark) instead of checking the prototype chain. This means it correctly identifies genuine errors across contexts and rejects fake objects trying to game the system. It's a short read but a useful one, especially if you're building anything that deals with cross-realm error handling!

💅 Showcase

Tremor

Tremor is a production-ready library of React + Next.js blocks and templates that helps web developers ship beautiful dashboards and data-heavy UIs fast, whether you prefer copy‑and‑paste components or an NPM package. Built on a modern stack with clean, customizable primitives (35+ components and 300+ block examples), Tremor lets you skip weeks of bespoke UI work and get to a launch-ready app tomorrow.

🎁 Resource

Simple Icons

Simple Icons is a massive collection of over 3,400 free SVG icons for popular brands, we're talking everything from Honda to Hono to n8n. You can search, download as SVG or PNG, and even check each brand's official color and guidelines. It's open source, well-maintained, and honestly one of those resources you'll keep coming back to.

👌 Cool Stuff

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

BaseHub – A Notion-like CMS with branching, typesafe SDK/GraphQL, and templates to scaffold, version, and ship content fast.

Consul – A macOS menubar file converter that detects mismatched extensions and converts files locally, automatically.

Kvile – A lightweight, offline-first HTTP debugging tool with first-class .http support, no account, and 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 😁.