Tailwind hits the big 4.0

Issue #361.January 24, 2025.2 Minute read.
Bytes

Today’s issue: Biome’s big plans, CSS becomes cool again, and one man moves on from React in the dramatic season finale of Love is Blind.

Welcome to #361.


Eyeballs logo

The Main Thing

Red-headed cartoon character throwing tomatoes

#UseThePlatform dudes preparing for the new Tailwind release

Tailwind hits the big 4.0

I’ve always respected the Tailwind team because they ship a lot, they minimize breaking changes, and because Adam Wathan once recorded a hardcore metal song called Make Weight or Die while prepping for a powerlifting competition.

But let’s focus on those first two reasons for now, because they just launched Tailwind v4.0 on Wednesday, and it could be their biggest release yet.

How we got here: It’s been three years since Tailwind v3 launched – and even though the framework’s npm downloads are up 7x since then, it still remains a fairly polarizing technology.

The haterz have criticized its lack of native CSS features and the way it forces you to configure your Tailwind project in a separate JavaScript file. The performance police have also complained about like slower-than-ideal build times.

Those are all valid critiques. At least, they were valid critiques before Tailwind v4 – because this release introduces major improvements in literally all of those areas:

  • New support for modern CSS features like native cascade layers, registered custom properties, color-mix(), container queries, and logical properties. Using the platform never felt so good.

  • A new CSS-first config lets you customize and extend the framework directly in your CSS file, instead of a tailwind.config.js file. Design tokens are now available as CSS variables by default, making it easier to reference values directly in your styles.

  • A new high-performance engine has been completely rewritten from the ground up and built on top of Lightning CSS. Full builds are now up to 5x faster, and incremental builds are over 100x faster because they no longer need to compile any new CSS.

Bottom Line: My grandmother once told me, “the best way to get even with your haters is to give them everything they’ve been asking you for all along.”

That was objectively terrible advice for dealing with my elementary school bullies, but it’s pretty solid advice for building a popular OSS tool. Thanks Gam Gam.

        

speakeasy logo

Our Friends
(With Benefits)

An image of a guy with glasses smirking

When you get end-to-end type safety without writing TypeScript

Speakeasy + TanStack Query is React’s hottest new couple

You probably already know that Speakeasy is the easiest way to create type-safe, enterprise-ready SDKs.

And now, they just launched a new React Hook generation feature, which uses TanStack Query and your OpenAPI spec to provide you with fully-typed React Hooks for every one of your API endpoints.

This allows you to make sure your entire API is available to your frontend team without writing a single line of code, so you can take the pain out of building frontend React apps.

Here’s what else it gets you:

  • End-to-end type safety from your API through to your React components, backed by Zod’s runtime validation

  • Automatic cache management with smart invalidation utilities (see example repo for the Bluesky API)

  • Support for SSR, RSC, and Suspense – plus support for both standard and infinite pagination patterns.

Try it out – and see why companies like Vercel and Mistral AI use Speakeasy.


Pop Quiz logo

Pop Quiz

Sponsored by Retool

They’re hosting a livestream to walk through exactly how they used Retool to build Retool University – their slick new developer learning platform.

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));

Cool Bits logo

Cool Bits

  1. React Native 0.77 comes with multiple new CSS features for better layouts, sizing and blending. Because I guess everyone suddenly decided that CSS support is cool all of a sudden??

  2. The Biome team shared their plans for Biome 2.0 and the rest of 2025.

  3. Thomas Hu and Chetan Patil are hosting a livestream on How to build testing culture on your team. They’ll outline a step-by-step plan to help you steadily improve test coverage at your org – without micromanagement. [sponsored]

  4. Kelly Sutton wrote an article called Moving on from React, a year later. How come the title of every blog post about migrating off React sounds like the title of a Love is Blind episode?

  5. The Bad at CSS podcast just came out with a new episode called, What do backend devs think of CSS? You can probably already guess the answer to that question, but it’s a really good interview.

  6. The Apryse OCR SDK provides enterprise-ready document conversion that lets you deliver exceptional accuracy, multilingual support, and seamless integration for your document workflows. [sponsored]

  7. The Callstack team just released Flows AI, a lightweight library to build agent workflows on top of Vercel AI SDK.

  8. Una Kravets wrote about the new capabilities for attr() that are coming to Chrome 133 next week. Personally, I’m offended that Tailwind doesn’t support this yet.

  9. Superglue just released v1.0 of its library that lets you “use classic Rails to build rich React Redux applications with no APIs and no client-side routing.”

  10. James Hawkins from PostHog wrote about How to not be a boring startup – because it turns out everyone judges books by their covers. Which is why my closed-minded drama teacher always cast me as “Ensemble Tree #3” in middle school. [sponsored]

  11. Robert Fidler wrote about client state management, sync engines, and Foundry.

  12. TikTok just released a Cursor IDE competitor called Trae. Apparently, Trump is forcing them to sell it to MrBeast though.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Retool

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));
  1. undefined - The Symbol constructor creates a unique value, so the Symbol used to set the value of myObject[key] is not the same as the Symbol used to get the value of myObject[key].

  2. {} - JSON.stringify ignores Symbol properties when stringifying an object.

This is useful for creating private properties on objects that can’t be accessed or modified outside of the object. You can read more about Symbols here.