Tailwind CSS v4.0: Performance Improvements and New Features

Tailwind CSS v4.0 has undergone a comprehensive upgrade, bringing significant performance improvements and numerous new features to boost front-end development efficiency.

Performance Improvements

With the new high-performance engine Oxide, the build speed has increased significantly. The full build speed has increased by over 3.5 times, the incremental build speed has increased by over 8 times, and the speed has increased by up to 182 times when there is no new CSS.

CSS Theme Variables

Design tokens are now default as CSS variables, which can be called at runtime, suitable for dynamic effects and integration with animation libraries. For example:

:root {
  --font-display: "Satoshi", "sans-serif";
  --color-avocado-100: oklch(0.99 0 0);
}

These can be dynamically referenced in the project.

Native CSS Cascade Support

The support for CSS cascade has been enhanced, enabling better control over the style hierarchy order to ensure that upper-layer styles do not override lower-layer ones. For example:

@layer theme {
  :root {
    --font-sans: ui-sans-serif, system-ui, sans-serif;
  }
  @layer base {
    * {
      box-sizing: border-box;
      margin: 0;
    }
  }
  @layer utilities {
    .pointer-events-none {
      pointer-events: none;
    }
  }
}

This makes the CSS output more orderly and predictable.

Dynamic Spacing Ratios

Multiple spacing tools can be derived from a single spacing value to optimize the design effect. Define the spacing ratio in the configuration file and use the corresponding utility classes in the project.

Modern P3 Color Palette

A new P3 color palette has been introduced, with more vivid colors, which is conducive to maintaining color balance. For example:

:root {
  --color-primary: #1a2b3c;
  --color-secondary: #4d5e6f;
}

The colors can be customized through the configuration file.

Container Query Support

Container queries can be implemented without additional plugins. Use the @max-* variants to handle responsive design. For example:

@layer utilities {
 .max-w-md {
    max-width: 28rem;
  }
}

It is easy to adjust the layout at different sizes.

3D Transformation API

A new 3D transformation API has been added, allowing direct 3D transformations in HTML. For example:

.transform-3d {
  transform: rotateX(45deg);
}

Complex 3D effects can be easily achieved.

Enhanced Gradient API

Supports linear gradient angle values, radial gradients, and conic gradients, etc. For example:

.gradient-linear {
  background-image: linear-gradient(to bottom, #1a2b3c, #4d5e6f);
}

The gradient effects can be customized through the configuration file.

@starting-style Support

Allows the creation of enter and exit transition effects without JavaScript. For example:

@layer utilities {
 .transition-enter {
    transition: opacity 0.3s ease-in-out;
  }
}

Dynamic transition effects can be easily achieved.

not- Variants

The style is applied only when the element does not match other variants. For example:

@layer utilities {
 .not-pointer-events-none {
    pointer-events: auto;
  }
}

It provides better control over the style application conditions.

Simplified Configuration

Introduces a CSS-first configuration method, where design tokens and breakpoints can be directly configured in the CSS file. For example:

@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
}

The configuration is more concise and intuitive.

Automatic Content Detection

Automatically discovers all template files without manual configuration. Manually add files not automatically detected through the @source directive.

Built-in Import Support

There is no need for additional tools to handle the import of multiple CSS files. For example:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

It processes CSS files faster.

Vite Plugin Integration

Provides the first Vite plugin, which is tightly integrated with Vite to maximize performance and minimize configuration. For example:

import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

It is easy to enjoy the high performance of Vite and the convenience of Tailwind.

With these new features and performance improvements, Tailwind CSS v4.0 is more flexible and powerful, capable of meeting complex front-end design requirements and improving development efficiency.