Hello folks!

No big official news to report this week, but we got a new v4 beta, so the v4 work is coming along nicely. Every week, v4 comes closer and closer to feature parity with v3 and with even new features, I can't wait for the stable release 👌🏻.

Now, let's dive in!

🤩 Sponsors

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 excel in converting your PSD, Figma, Adobe XD, and Sketch files into responsive and maintainable Tailwind CSS markup.

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

📚 Learning

On compliance vs readability: Generating text colors with CSS

If you've ever wrestled with selecting text colors that stand out against varying backgrounds, this piece is for you! Lea explores the new contrast-color() function, which promises to simplify this process, offering an easy way to ensure text is always readable no matter the background. The article doesn't just stop at introducing new features; it dives deep into leveraging the powerful Relative Color Syntax (RCS), arming CSS devs with the tools to be creative and efficient.

Printing music with CSS grid

Stephen Band's blog post dives into using CSS Grid to create accessible and responsive music notation on the web—a solution for musicians tired of squinting at PDFs on small screens. By leveraging CSS Grid's powerful layout capabilities, the post shows how to use data attributes to precisely position notes and symbols, crafting a fluid experience that adapts seamlessly across devices. Whether you're a coder or musician, this approach shows how web technologies can transform digital music rendering.

CSS Scroll-triggered Animations with Style Queries

Sparked by a remarkable CodePen demo, Ryan explores how CSS can replicate effects traditionally managed by JavaScript, like highlighting text as you scroll. The clever use of custom properties and style queries showcases the power and potential of modern CSS, though full browser support is still on the horizon. If you're passionate about innovative web design techniques and curious about pushing CSS to its limits, this post is a fascinating read.

💅 Showcase

Shuttle

Shuttle is your go-to solution for smart asset management tailored for web developers, offering a user-friendly platform that ensures your files are always in your control. With the ability to customize sharing settings and keep track of access, you can host, share, and receive creative assets with unmatched ease and security.

🎁 Resource

tailwind-to-inline

If you work with email templates and want to use Tailwind CSS, then tailwind-to-inline, might be right up your alley. It solves the headache of needing inline styles in emails by letting you use Tailwind CSS classes just like you would in a regular project. With a single function, you can convert those classes into inline styles, generating email-ready HTML without having to manually style every bit of your template. It's particularly handy for anyone looking to streamline their workflow and minimize errors when designing emails.

👌 Cool Stuff

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

"Level up with Tailwind CSS" by Shruti dives into real-world Tailwind examples and offers tips even seasoned users will find valuable. Plus, there's an accompanying video course with fresh content every week. If you're serious about improving your Tailwind CSS skills, this book is for you!

Merklemap DNS – Access 4B+ DNS records for security, insights, and network analysis in JSON.

cpx – Run any Composer package command without installation or conflicts, speed up your PHP workflows.

bolt.new – Prompt, run, and deploy full-stack web apps seamlessly—start with pre-made templates or build from scratch.

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 the link below 😁.