• Tailwind Weekly
  • Posts
  • Tailwind Weekly #183: Cleaner Dev Tools with v4, Fluid Typography, & Creative Box Shadows 😘!

Tailwind Weekly #183: Cleaner Dev Tools with v4, Fluid Typography, & Creative Box Shadows 😘!

February 15, 2025

Hello folks!

After being very sick for the past week, I’m feeling much better now. Thanks to all who gave me their good wishes on X/Bluesky; we’re back in business 🤩 .

Let's dive in!

🌟 News

When I started using Tailwind CSS v4, I encountered an annoying pain point: Now that every value is a CSS variable, the dev tools pane looks messy. Well, that was fixed this week, and the dev tools look much cleaner.

Adam also shared a thread yesterday about how Tailwind CSS behaves in Vue/Svelte/Astro and with CSS modules. They’re pretty good tips in there, but the TL;DR is:

  • Don’t use @apply outside CSS files.

  • Import as few CSS files as possible in your JS files.

There’s a reason 400,000 professionals read this daily.

Join The AI Report, trusted by 400,000+ professionals at Google, Microsoft, and OpenAI. Get daily insights, tools, and strategies to master practical AI skills that drive results.

📚 Learning

Lorenz dives into the issues of static scaling in CSS, which can make text too small on phones or too big on desktops, and offers a modern fix using fluid calculations. You'll learn how to use pure CSS to make these elements scale naturally, ensuring readability and accessibility without needing to tweak them for different contexts. The article breaks down the math behind this fluid approach, showing you how to maintain baseline alignment and adjust the vertical offset. It's all about achieving that perfect balance so your text looks professional and consistent, no matter the screen size.

This article is a wild ride through the unconventional uses of box shadows, showing off some of the most bizarre and creative applications you could imagine. Instead of sticking to the standard UX trends, it dives into the chaotic world of layering countless shadows on a single div, pushing boundaries with performance on an M1 chip. You'll explore everything from creating fake 3D effects with bouncing balls to attempting ray tracing, all with box shadows!

In this piece, you’ll build a custom audio player using Media Chrome, a cool open-source library for creating media players using Web Components. You'll breeze through setting up the HTML structure, incorporating SVG icons, and styling with Tailwind to create a sleek design inspired by the tailwindui.com homepage. You’ll also explore some of the web’s coolest features, like CSS custom properties and container queries, making the player responsive and accessible from the get-go. 

💅 Showcase

screencasting.com is your go-to resource for mastering the art of creating high-quality screencasts that delight your users. Whether you're a seasoned developer or just starting, this comprehensive course provides all the essential tools, from content planning to equipment setup and seamless editing techniques.

🎁 Resource

This little gem is perfect if you need a quick, browser-based way to compress or convert images. Squish supports a bunch of popular formats like AVIF, JPEG, PNG, WebP, and even JXL, and lets you export images instantly with customizable quality settings (default is 75%, but you can tweak it). The interface is super clean, just drag and drop your images or click to upload, and you’re ready to go.

👌 Cool Stuff

"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!

Terminal Themes - Find and create themes for Warp and iTerm2 right from the web. They showcase a featured collection of popular themes and have a web editor where you can create your own and download it for both terminals.

Lexical – An extensible text editor framework that is fast, accessible, and built for cross-platform use with a simple setup.

Figmalion – A weekly Figma newsletter packed with updates, insights, resources, and tools for the design community.

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