●Change8

Migrating to Tailwind CSS v4.0.0

Version v4.0.0 introduces 3 breaking changes. This guide details how to update your code.

Released: 1/22/2025

3
Breaking Changes
4
Migration Steps
7
Affected Symbols

⚠️ Check Your Code

If you use any of these symbols, you need to read this guide:

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

Breaking Changes

●Issue #1

JavaScript-based configuration (tailwind.config.js) is replaced by CSS-first configuration using @theme blocks.

●Issue #2

Default color palette has been modernized to P3, which may change the appearance of existing colors.

●Issue #3

Engine now uses native CSS features like cascade layers and @property, requiring modern browser support.

Migration Steps

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

Release 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.

Need More Details?

View the full release notes and all changes for Tailwind CSS v4.0.0.

View Full Changelog