- Tailwind Weekly
- Posts
- Tailwind Weekly #181: v4 Stable Is Here & Miami Connect Highlights 🚀
Tailwind Weekly #181: v4 Stable Is Here & Miami Connect Highlights 🚀
Hello folks!
After more than a year of work, the Tailwind team released v4 stable this week 🚀. Now they’ll be enjoying a well-deserved rest!
I already migrated a few sites to v4 and started using it on a client project. It's so fast! I thought I would hate not having a config file but I'm actually loving it all being just CSS.
Now, let's dive in!
🌟 News
It’s real, folks; v4 is finally stable! Here are the highlights:
New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with
@property, andcolor-mix().Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
First-party Vite plugin — tight integration for maximum performance and minimum configuration.
Automatic content detection — all of your template files are discovered automatically, with no configuration required.
Built-in import support — no additional tooling necessary to bundle multiple CSS files.
CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
Container queries — first-class APIs for styling elements based on their container size, no plugins required.
New 3D transform utilities — transform elements in 3D space directly in your HTML.
Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
@starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
not-* variant — style an element only when it doesn't match another variant, custom selector, or media or feature query.
Even more new utilities and variants — including support for
color-scheme,field-sizing, complex shadows,inert, and more.
If you want to learn more, then read the blog post AND check out the new docs site. The new design is truly amazing 🤩 .
I attended the Miami Tailwind Connect event and had a blast. Adam demoed all the cool features of v4, and after, we went to the rooftop for some pizza and beer.
I also had the pleasure of attending a special dinner for us Tailwind contributor folks and the Tailwind Labs team. Thank you, Adam and the team, for treating Ben, Justin, and me there to a delicious dinner, it was amazing ❤️ .
🤩 Sponsor
Getting requests from businesses who need a website? But your schedule's maxed out ⁉️
As active members of the Tailwind dev community ourselves, FLX Websites creates and supports professional, modern websites that will make both you and your referral look great.
Plus, we'll send you a $200 USD bonus if your referral becomes a client. 💸
📚 Learning
This article breaks down essential accessibility principles into manageable practices that are easy to apply, such as using semantic HTML, ensuring keyboard navigation works, and crafting better image alt texts. It also emphasizes that these practices not only help users with assistive technologies but also enhance the overall user experience and even boost SEO. With examples primarily using React but applicable to any front-end framework, it’s a must-read for those looking to integrate accessibility into their workflow without a huge time investment.
Chris Coyer created a Word Search Puzzle Maker because his kid got into word searches. It's simple: you input your words, hit a button, and it fills the grid with random letters, ready to print. The neat part is how they used a single size variable across HTML, CSS, and JavaScript to make it all work smoothly. Using Pug to generate HTML, they loop through to create the grid elements. In CSS, the same size variable sets up a grid with the right columns and rows, and in JavaScript, it even enables arrow key navigation to make word entry easier. It’s a clever way to control everything from one place, showing just how powerful integrating these technologies can be.
This article introduces a fresh perspective using the new @starting-style feature. Imagine crafting animations without diving into @keyframes—not as a replacement but as a handy trick in the right scenarios. The piece walks you through a simple rotation example, using large values for an infinite effect, and then steps it up with a more complex animation involving variables. It demonstrates how you can animate and apply a single variable creatively across different properties, like background and rotation.
💅 Showcase
Plunk is an open-source, cost-effective email platform explicitly designed for web developers, consolidating marketing, transactional, and broadcast emails into one solution. Plunk eliminates the hassle of juggling multiple tools and APIs, offering transparent pricing that only charges for what you use and ensures privacy by hosting all data within the EU, while its responsive email editor guarantees flawless rendering across all platforms, including Outlook.
🎁 Resource
This tool lets you create stunning gradients from your own photos! The interface is super intuitive, just upload a photo, and it practically does the work for you. It has a couple of controls that make it unique like Warp shape and gradient type. Perfect for when you need that extra pop of color without the hassle of manual adjustments!
👌 Cool Stuff
Windy is a browser extension for Google Chrome and Firefox that lets you transform HTML elements to Tailwind CSS with a single click. Speed up your workflow with Windy and save hours or even days when converting existing styles to Tailwind CSS.
Pixelcode – Instantly convert code from screenshots, PDFs, and videos with a Chrome extension. Supports 30+ languages.
Alcove – Experience Dynamic Island for Mac with fluid transitions, instant notifications, and customizable HUDs.
Harper – Elevate your writing with AI-driven editing and style suggestions tailored for developers.
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 😁.
