What's New With Tailwind CSS v4.0?

Tailwind CSS has emerged as the go-to CSS framework for anybody starting a frontend project in 2024. Its simplicity, versatility, and scalability have resulted in an undefeated record as the top CSS framework in recent State of CSS surveys. It has come a long way since its initial release in 2019 and has evolved significantly, continually improving with each iteration.

Recently, Tailwind CSS released its beta version of v4.0. With v4.0, the framework takes a massive leap forward, delivering a blazing-fast engine, exciting new utilities, and modern CSS features that make it an even more powerful CSS framework. If you're a fan of Tailwind (like I am), you're in for a treat. Let's explore the standout features of Tailwind CSS v4.0 Beta, how it makes development easier, and how you can get started.

Getting Started With Tailwind CSS 4.0

With v4.0, Tailwind provides several ways to install Tailwind CSS in your project.

1. If you're using Vite as a bundler or working with a Vite-powered framework, you can install Tailwind with its new dedicated Vite plugin.

2. If your project supports PostCSS, you can install it with the dedicated PostCSS Tailwind plugin.

3. Otherwise, you can use the CLI tool that directly installs Tailwind in your project.

If you want to try out Tailwind in your existing project, you can use the upgrade tool that does most of the heavy lifting of upgrading the codebase.

Make sure you follow its official documentation to install it properly without any issues.

Tailwind CSS v4.0 Beta — In A Nutshell

Here's what makes the latest version of Tailwind CSS talk-worthy:

• A New High-Performance Engine: Rewritten with TypeScript and Rust from scratch, this engine delivers performance improvements of up to 5x faster for full builds and 100x faster for incremental builds.

• Unified Toolchain: Say goodbye to configuring tools like postcss and autoprefixer. Tailwind now handles everything internally, so setup is a breeze.

• Modern CSS Support: With features like 3D transforms, OKLCH color palettes, container queries, and built-in CSS imports, Tailwind v4.0 is designed for today’s web.

Excited? Let’s dive deeper into these features.

A Faster Smarter Engine

The Tailwind engine is an integral part of Tailwind CSS that enables utility first approach that Tailwind uses. It uses Just-In-Time compilation to generate only CSS classes used in HTML/JSX, optimizing the file size for performance.

With v4, the Tailwind team built a new engine from scratch using TypeScript and Rust. The new engine shows shocking improvements over the last engine. When tested on one of the official templates, the new version of Tailwind CSS was 3.5x faster than Tailwind CSS v3.4 for full builds, and over 8x faster for incremental builds.

The new engine significantly reduces build times by using Rust for parallel processing. You'll notice a difference in performance no matter how small or large the application you're working on.

Automatic Source Detection

Until now, you had to manually configure paths to files containing Tailwind classes. Remember copying content array from Tailwind docs and pasting it to the Tailwind config file? Yes, exactly that.

v4 makes it a thing of the past by introducing automatic source detection. Now Tailwind scans your project for files containing Tailwind classes while ignoring unnecessary files (like assets, JSON). It also automatically ignores everything mentioned in .gitgnore. Still, if you want to add an excluded file, you can add it using the @source directive, directly in your CSS file!

This is a great developer experience and would be a hassle while setting up a new project.

Native Support for 3D Transform

Tailwind v3 lacked 3D transform APIs. You had to use external plugins like @xpd/tailwind-3dtransforms to add 3D transform classes to the Tailwind project. Tailwind finally brings 3D transform utilities out of the box.

Here are the new classes and their types:

• Rotation: rotate-x-*, rotate-y-*, rotate-z-*.

• Scaling: scale-z-* for z-axis scaling.

• Translation: translate-z-* to move elements closer or farther away.

• Perspective: Control 3D perspectives with perspective-* and perspective-origin-*.

• Backface Visibility: Use backface-visible and backface-hidden to control element visibility when rotated.

Let's see a quick example from Tailwind documentation.

<div class="perspective-distant">
  <article class="... transform-3d rotate-x-51 rotate-z-43 shadow-xl transition-all duration-500 hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38 hover:shadow-2xl">
    <!-- ... -->
  </article>
</div>

This is how it'd look on the screen:

No need for third-party plugins anymore—just Tailwind! Finally, I don't have to rely on third-party plugins or switch between plain CSS and tailwind or relying on third-party plugins.

New Utilities In Tailwind CSS v4.0

Tailwind v4.0 packs a bunch of new utilities to make your life easier:

• Field Sizing: Create auto-resizing textareas with the field-sizing utility.

• Color Scheme: Easily set a color scheme with the color-scheme utility.

• Font Stretch: Style variable fonts with different widths using the new font-stretch utility.

These utilities streamline common tasks, so you can write less code and build faster.

Composable Variants

Variants in Tailwind just got a major upgrade. You can now chain variants to create more complex styles without relying on arbitrary class names.

In v3, you needed to add complex arbitrary variant class names. Like the following:

<div class="group-has-[&[data-potato]]:opacity-100">

Although it worked, it was poor DX and needed some improvements. v4 improves this by allowing you to chain all variants with one another. Here's how you can write the same code from above:

 <div class="group-has-data-potato:opacity-100">

This includes not only existing variants like group-*, peer-*, has-* but also the newer ones like not-* and in-*.

For example, instead of creating an arbitrary class like this:

<div class="peer-not-data-active:underline" />

You can now chain variants like:

<div class="group-not-has-peer-not-data-active:underline" />

The possibilities are endless—but be cautious to avoid unnecessary complexity in your styles!

New variants with Tailwind CSS v4

As we are talking about variants, let’s discuss some new variants introduced with Tailwind CSS v4.

1. @starting-style: The new starting variant adds support for the new CSS @starting-style feature, making it possible to transition element properties when an element is first displayed.

2. not-*: This adds support for the :not(…) pseudo-class in CSS, allowing you to style things when certain conditions are false.

3. in-*: The in-* variant is just like the group-* variant, except that you don’t need to add group class name to the parent element.

4. inert: This newly added variant lets you style elements marked with inert attribute. The inner attribute makes an element and all of its descendants non-interactive.

5. Descendant variant: With v4.0 Tailwind has introduced a new ** variant for targeting all descendants of an element.

Better Color Palettes

Color management in Tailwind CSS has received a significant upgrade with v4.0, making it more powerful, flexible, and aligned with modern web standards.

v4 uses OKLCH color palette

Tailwind has transitioned from the traditional RGB color space to OKLCH (Lightness, Chroma, Hue). Why, you may ask. That's because OKLCH allows for:

• Wider Gamut: More vibrant and nuanced colors compared to RGB and sRGB.

• Better Color Perception: Colors align more naturally with human vision, making gradients and hues visually consistent.

Simplified Custom Colors with color-mix()

Defining custom colors in Tailwind v3 was cumbersome, requiring workarounds like <alpha-value> placeholders or adding number values of red, green, and blue colors without rgb(...) function.

In v4.0, the color-mix() function eliminates these complexities. Now you just need to define colors as variables and all the opacity modifier features will work automatically.

Support you have to use a utility class like bg-primary/50, you can directly use it without any workaround:

Gradient interpolation modifiers improved

You can decide whether to use sRGB or OKLCH interpolation while adding gradient classes.
For example, a class like bg-linear-to-r/srgb would use sRGB whereas bg-linear-to-r/oklch would use OKLCH.

 <div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
 <div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>

It’d look like this on the screen:

Conic and radial gradients

The new Tailwind CSS version allows you to add conic and radial gradients to your design. These new gradient utilities work alongside the existing from-*, via-* and to-* utilities. So you’d create these gradients exactly how you used to create linear gradients.

Furthermore, this lets you set color interpolation methods that we saw in the previous section as well as arbitrary values to get better control of the utility classes.

For example,

<div class="bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600 size-24 rounded-full"></div>
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75% size-24 rounded-full"></div>

This is how the above elements would look on the screen:

Built-in Container Query Support

All major browsers today support container queries, hence it'd have been a surprise if Tailwind hadn't added this. Previously, you had to install @tailwindcss/container-queries plugin to get this done, but now you can do it natively with @container directive.

It has also added support for max-width container queries using the new @max-* variant. This can be used to stack these variants to define container query ranges.

<div class="@container">
  <div class="flex @min-md:@max-xl:hidden">
    <!-- ... -->
  </div>
</div>

Unified Toolchain

One of the most exciting changes in v4.0 is the unified toolchain. Tailwind now handles:

• CSS imports (no need for postcss-import).

• Autoprefixing and modern CSS transpilation (no more autoprefixer or postcss-preset-env).

This makes Tailwind easier to set up and eliminates external dependencies.

Wrapping Up

There are some more changes that we didn't cover in this article. Overall, I am very excited to try out the latest beta version of Tailwind CSS v4.0. What about you? I'd love to know. You can reach me on Peerlist or Twitter!

If you're looking for a developer job, or want to share a project you built, check out Peerlist!

Until then, happy coding! 🧑‍💻