New Capabilities of Tailwind CSS v4.0

Tailwind CSS v4.0 is a comprehensive upgraded version that provides significant performance improvements and multiple new features. Here are its main features:

Performance Improvements

• Full Build: The speed is increased by more than 3.5 times.
• Incremental Build: The speed is increased by more than 8 times. In the case of no new CSS, the speed is increased by up to 182 times.

CSS Theme Variables

Design tokens are defaulted as CSS variables and can be called at runtime, which is 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 variables can be dynamically referenced throughout the project.

Native CSS Stacking Support

Enhanced support for CSS stacking allows developers to better control the hierarchical order of styles and ensure that upper-level styles do not inadvertently cover lower-level styles. For example:

@layer themes {
  :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

Developers can derive multiple spacing tools from a single spacing value to optimize design effects. For example, define spacing ratios through configuration files and then use the corresponding tool classes in the project.

Modern P3 Color Palette

Introduced a new P3 color palette, making colors more vivid and conducive to maintaining color balance. For example:

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

These colors can be customized through configuration files.

Container Query Support

Container queries can be implemented without additional plugins. Handle responsive design through @max-* variants. For example:

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

This allows developers to easily implement layout adjustments at different sizes.

3D Transformation API

Added a 3D transformation API that allows developers to directly perform 3D transformations in HTML. For example:

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

This makes it easy for developers to achieve complex 3D effects.

Enhanced Gradient API

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

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

These gradient effects can be customized through configuration files.

@starting-style Support

Allows developers to create entry and exit transition effects without using JavaScript. For example:

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

This makes it easy for developers to achieve dynamic transition effects.

not- Variants*

Styles are applied only when elements do not match other variants. For example:

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

This allows developers to better control the application conditions of styles.

Simplified Configuration

Introduced a CSS-preferred configuration method. Developers can directly configure design tokens and breakpoints in CSS files. For example:

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

This makes configuration more concise and intuitive.

Automatic Content Detection

Automatically discovers all template files without manual configuration. For example, add unautodetected files through the @source directive.

Built-in Import Support

Can handle the import of multiple CSS files without additional tools. For example:

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

This allows developers to handle CSS files more quickly.

Vite Plugin Integration

Provides the first Vite plugin to achieve close integration with Vite and maximize performance and minimize configuration. For example:

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

This makes it easy for developers to enjoy the high performance of Vite and the convenience of Tailwind.

These new features and performance improvements make Tailwind CSS v4.0 more flexible and powerful, able to meet complex front-end design needs and improve development efficiency.