What is New in Tailwind CSS 4.0 Update?

# React

8 Mins

Jayram Prajapati · 31 Jan 2025

The long-awaited release of Tailwind CSS 4.0 on January 22, 2025, allows developers to explore its groundbreaking new features. This update is a major boost to the utility-first CSS framework. This version has a complete architectural overhaul with the new Oxide engine. It boosts build speeds and reduces bundle sizes. Developers know Tailwind CSS for its flexibility and efficiency. With v4.0, it makes a big leap forward. It simplifies installation and provides a more intuitive CSS-first setup.

In this blog, we will explore the key features of Tailwind CSS 4.0, including performance and developer experience. Whether you are a seasoned user or new to Tailwind, this update promises to streamline your workflow and elevate your web development projects to new heights. Join us as we explore what makes Tailwind CSS 4.0 a game-changer in front-end development!

What is New in Tailwind v4.0

Whether building an app from scratch or upgrading an existing project, this version is designed to make development faster, easier, and more powerful than ever.

Performance Like Never Before

Speed is at the heart of Tailwind CSS v4.0. Thanks to a brand-new high-performance engine, you can expect the following:

Full build-upto five times faster
Incremental builds over one hundred times faster, measured in microseconds

No more waiting—just lightning-fast development.

Built for the Modern Web

Tailwind CSS v4.0 fully embraces the latest web standards, making it a future-proof choice for developers. Some of the key enhancements include:

Support for cascade layers, registered custom properties with @property, and color-mix() for more advanced styling
A first-party Vite plugin for seamless, high-performance integration
Automatic content detection, so Tailwind scans your templates without manual configuration
Built-in import support to bundle multiple CSS files effortlessly

A More Intuitive Configuration Experience

Customization has never been this simple. In v4.0, Tailwind adopts a CSS-first approach, making modifying and extending styles easier.

Key improvements include:

CSS theme variables, so all design tokens are now native CSS variables and accessible anywhere
Dynamic utility values and variants, eliminating the need to extend configurations for common attributes manually
Simplified installation with fewer dependencies and a one-line setup in your CSS file

Next-Level Design Features

Tailwind CSS v4.0 introduces several powerful new utilities and enhancements, allowing developers to push design boundaries with ease:

A P3 color palette with more vivid, high-fidelity colors optimized for modern screens
Container queries are built-in, allowing elements to be styled based on their container size without extra plugins
New 3D transform utilities to apply 3D transformations directly in your HTML
Expanded gradient APIs, including radial and conic gradients, interpolation modes, and more
Support for @starting-style, enabling smooth enter and exit transitions without JavaScript
A new not-* variant to style elements only when they do not match another selector, media query, or feature query

And that's just the beginning. Tailwind CSS v4.0 supports color schemes, field sizes, complex shadows, inert elements, and many other improvements.

1. New high-performance engine

Tailwind CSS v4.0 is a complete rewrite of the framework, built from the ground up for maximum speed. Leveraging years of architectural insights, they have optimized every aspect to deliver unparalleled performance.

In their benchmarks, complete rebuilds are over 3.5x faster, while incremental builds see an 8x speed boost—dramatically improving the development experience.

The most remarkable boost comes from incremental builds that don't require compiling new CSS—these are now over 100x faster, running in mere microseconds. As your project grows, you'll experience this advantage more frequently, especially when reusing commonly used utility classes like flex, col-span-2, or font-bold.

2. Built for the Modern Web

Since the release of Tailwind CSS v3.0, the web platform has evolved significantly—and v4.0 fully embraces these advancements to deliver a more powerful, efficient, and flexible experience.

Modern CSS Features

Tailwind CSS v4.0 leverages cutting-edge CSS capabilities to improve both performance and maintainability:

Native cascade layers (@layer theme, base, components, utilities;)
Gain finer control over how styles interact, reducing conflicts and improving organization.
Registered custom properties
Enable smoother animations (like animating gradients) while boosting performance on large pages.
color-mix() function
Easily adjust the opacity of any color value, including CSS variables and currentColor, for more dynamic styling.
Logical properties
Simplify RTL (right-to-left) support and reduce the size of generated CSS, making styles more adaptive and efficient.

@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

@property --tw-gradient-from {
  syntax: "";
  inherits: false;
  initial-value: #0000;
}

These changes improve the developer experience and simplify Tailwind internally, reducing potential bugs and making the framework easier to maintain.

3. Tailwind V 4.0 Installation Process

With Tailwind CSS v4.0, we've dramatically simplified the setup, cutting down on steps and eliminating unnecessary boilerplate. Here's how easy it is to get started:

Install Tailwind CSS
npm i tailwindcss @tailwindcss/postcss

Add the PostCSS Plugin

export default {  
  plugins: ["@tailwindcss/postcss"],  
};

Import Tailwind in your CSS
@import "tailwindcss";

The Best Part of Installing Tailwind v4.0

One line of CSS: No need for multiple @tailwind directives; simply add @import "tailwindcss" and you're ready to build.
Zero configuration: You can start using Tailwind without any setup. No need to configure paths to template files or tweak settings.
No external plugins required: They handle @import rules automatically and leverage Lightning CSS for vendor prefixing and modern syntax transformations right out of the box.

While this process is only used once per project, Tailwind v4.0 makes it faster and simpler than ever to get started.

4. First-Party Vite Plugin for Seamless Integration

If you're using Vite, they have made it even easier to integrate Tailwind CSS with the official @tailwindcss/vite plugin. Here's how simple it is to set up:

vite.config.ts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

While Tailwind CSS v4.0 is already incredibly fast as a PostCSS plugin, using the Vite plugin takes performance to the next level, providing even faster build times and an optimized experience.

5. Automatic Content Detection

Smarter Content Detection in Tailwind CSS v4.0

One of the most tedious tasks in previous versions of Tailwind CSS was configuring the content array to tell Tailwind where to look for classes. In v4.0, they have eliminated this hassle by introducing intelligent heuristics that automatically detect content sources, so you no longer need to manually configure it.

Automatic Exclusion of Files

We automatically ignore files listed in your .gitignore—such as node_modules, build directories, and other generated files—so Tailwind doesn’t waste time scanning unnecessary dependencies. For example, we ignore:

/node_modules
/coverage
/.next/
/build

Binary File Exclusion

Tailwind will automatically skip binary files like images, videos, .zip archives, and others, ensuring faster scans and more accurate results.

Need to Add an Excluded Source?

If you ever need to explicitly include a source that’s normally excluded (e.g., files outside your typical source directories), you can use the @source directive directly in your CSS:

@source "./custom-directory/**/*.html";

@import "tailwindcss";  
@source "../node_modules/@my-company/ui-lib";

The @source directive follows the same intelligent heuristics, automatically excluding binary file types—without you needing to specify file extensions to scan manually. This makes the setup even more straightforward and more intuitive.

Tailwind CSS v4.0's automatic content detection removes one more step, so you can spend more time building and less time configuring.

6. Dynamic Utility Values and Variants

Now, they can handle certain custom values directly without needing extra configuration or using complex syntax.

For example, you can now create grids of any size easily:

<div class="grid grid-cols-15">
  <!-- content here -->
</div>

  <!--You can also use custom boolean data attributes without defining them beforehand:-->
<div data-current class="opacity-75 data-current:opacity-100">
  <!-- content here -->
</div>

  <!--Utilities for spacing (like px-*, mt-*, w-*, h-*, etc.) now work with a single spacing scale, and you can pass any value directly:-->

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .pr-29 {
    padding-right: calc(var(--spacing) * 29);
  }
}

Finally, Tailwind's upgrade tool will automatically simplify most of these utilities for you, especially if you use custom values that no longer need to be manually specified.

7. Modernized P3 Color Palette (Simplified Explanation)

Upgraded the default color palette from RGB to OKLCH. Designers can use a broader range of colors, making them more vibrant than the older sRGB color space.

Although they have refreshed the colors and carefully maintained their overall balance from v3, your existing projects will still look familiar, and upgrading shouldn't cause major changes.

8. Built-in Import Support & CSS-First Configuration

Built-in Import Support

if you wanted to use @import to include other CSS files, you needed an additional plugin like postcss-import. In Tailwind CSS v4.0, this is now built-in, meaning you don't need extra tools:

// postcss.config.js (before v4.0)
export default {
  plugins: [
    "postcss-import", // No longer needed in v4.0
    "@tailwindcss/postcss",
  ],
};

This built-in import system is optimized for Tailwind CSS, making it faster and more efficient.

CSS-First Configuration

One of the biggest changes in v4.0 is moving from JavaScript-based configuration (tailwind.config.js) to CSS-based configuration.

Instead of a separate config file, you can define everything directly in your CSS:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  /* More theme variables... */
}

This simplifies project setup by reducing the files you need to manage while keeping all customization inside CSS.

CSS Theme Variables

Tailwind CSS v4.0 automatically converts your design tokens into CSS variables, making them available anywhere in your styles.

Example of the generated CSS from the @theme block:

:root {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

You can now use these variables dynamically in inline styles, animations, or any other CSS-based tools, making styling more flexible and consistent.

9. New 3D Transform Utilities in Tailwind CSS v4.0

Tailwind CSS v4.0 now includes 3D transform utilities, which allow you to apply depth and perspective effects to elements easily.

New 3D Utilities Include:

Rotate: rotate-x-*, rotate-y-*, rotate-z-*
Scale: scale-z-*
Translate: translate-z-*
Perspective & Transform Styles

Example Usage:

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d">
    <!-- Content goes here -->
  </article>
</div>

These utilities make it easy to create more dynamic and visually engaging designs. Check out the updated rotate, perspective, and transform-style docs to get started!

10. New not-* Variant in Tailwind CSS v4.0

Tailwind CSS v4.0 introduces the not-* variant, allowing you to use the CSS :not() pseudo-class for more flexible styling.

Negating States (e.g., not-hover)

You can now apply styles when an element is NOT in a specific state:

<div class="not-hover:opacity-75">
  <!-- Content -->
</div>

<!-- Generated CSS: -->
.not-hover\:opacity-75:not(*:hover) {
  opacity: 75%;
}

This means the element will only have opacity: 75% when it is NOT being hovered.

Negating Media Queries & @supports

You can also negate media and feature queries, making it easier to handle feature support fallbacks.

Example: Apply padding only when hanging-punctuation is NOT supported.

<div class="not-supports-hanging-punctuation:px-4">
  <!-- Content -->
</div>

<!-- Generated CSS: -->
@supports not (hanging-punctuation: var(--tw)) {
  .not-supports-hanging-punctuation\:px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
}

Why This Is Useful

Simplifies negating styles without complex CSS rules
Works with media queries & feature queries
It makes Tailwind even more potent for responsive & conditional styling

Check out the new not-* documentation to explore more use cases!

Even More New Utilities and Variants in Tailwind CSS v4.0

Tailwind CSS v4.0 introduces several new utilities and variants, making it easier to create highly customizable designs. Here are some of the latest additions:

inset-shadow-* & inset-ring-* Utilities – Stack up to four layers of box shadows on a single element.
New Field Sizing Utilities – Auto-resizing areas without writing a single line of JavaScript.
Color Scheme Utilities – Remove unwanted light scrollbars in dark mode.
Font Stretch Utilities – Adjust variable fonts that support different widths.
New inert Variant – Style non-interactive elements marked with the inert attribute.
New nth-* Variants – Advanced styling for targeting specific elements dynamically.
New in-* Variant – Similar to group-*, but without requiring a .group wrapper.

Essence

That wraps up the Tailwind CSS v4.0 update released on the official platform. This considerable release was built with years of effort and fine-tuned to help you create even better designs. Now, the world is waiting for new advanced project ideas and new tech. Build your project with the latest tools and techs to help you stand out from competitors.

Want to upgrade your project or need expert assistance with Tailwind CSS development? Elightwalk Technology offers professional Tailwind CSS developers to help you optimize, upgrade, and customize your projects effortlessly.

Contact Elightwalk Technology today to bring your ideas to life with Tailwind CSS v4.0.

Table of contents

Jayram Prajapati

Full Stack Developer

Jayram Prajapati brings expertise and innovation to every project he takes on. His collaborative communication style, coupled with a receptiveness to new ideas, consistently leads to successful project outcomes.

Most Visited Blog

Different Ways to Import CSS Files in React

Use CSS files, modules, and other modern tools to learn how to style React components.

Best 11 React Carousel Component Libraries

We present the best 11 React Carousel Component Libraries to improve the UI/UX designs for your next web development project. Improve the user experience by adding dynamic and interactive carousel components to your website or application. Choose the perfect carousel library for your project with the right expert guidance!

The Best Optimization Techniques in React

Gain valuable insights to improve your app's performance, backed by expert advice from our seasoned ReactJS developers. Discover how top companies like CSDN, Dropbox, and LinkedIn recommend optimising your ReactJS code. Contact us if you need expert help to grow your app.