●Change8

v4.0.0

Breaking Changes
📦 tailwind-cssView on GitHub →
⚠ 3 breaking✨ 11 features🔧 7 symbols

Summary

Tailwind CSS v4.0 is a major performance-focused rewrite featuring a new high-speed engine, CSS-first configuration, and native support for modern web features like container queries and 3D transforms.

⚠️ Breaking Changes

  • JavaScript-based configuration (tailwind.config.js) is replaced by CSS-first configuration using @theme blocks.
  • Default color palette has been modernized to P3, which may change the appearance of existing colors.
  • Engine now uses native CSS features like cascade layers and @property, requiring modern browser support.

Migration Steps

  1. Use the automated upgrade tool: 'npx @tailwindcss/upgrade'.
  2. Replace tailwind.config.js logic with @theme blocks in your CSS file.
  3. Update CSS entry point to use the single-line v4 import/directive.
  4. Review the comprehensive upgrade guide for manual adjustments to custom plugins or complex configurations.

✨ New Features

  • New high-performance engine (5x faster full builds, 100x faster incremental builds).
  • CSS-first configuration using native CSS variables.
  • Automatic content detection (no need to configure 'content' paths).
  • First-party Vite plugin for tighter integration.
  • Built-in @import support for CSS bundling.
  • Native Container Queries support without plugins.
  • New 3D transform utilities.
  • Expanded gradient APIs (radial, conic, and interpolation modes).
  • @starting-style support for transitions.
  • New 'not-*' variant for conditional styling.
  • Support for modern CSS properties: color-scheme, field-sizing, and inert.

🔧 Affected Symbols

@theme@starting-stylecolor-mix()@propertytailwind.config.jsnot-*container-type