Framework Upgrade

Migrate Tailwind CSS 3 to Tailwind CSS 4 Automatically

Upload your project and get production-ready migrated code in minutes.

Start Migration

What changes between Tailwind CSS 3 and Tailwind CSS 4?

  • Configuration moves from tailwind.config.js to CSS-first using @theme directive in your CSS file
  • @tailwind directives replaced by @import 'tailwindcss' single import
  • PostCSS plugin changes: @tailwindcss/postcss replaces tailwindcss in postcss.config
  • Renamed utilities: shadow-sm becomes shadow-xs, shadow becomes shadow-sm, etc.
  • Ring width default changed from 3px to 1px; ring-* utilities need adjustment
  • Container utility no longer has built-in center/padding; use @utility to customize
  • Color opacity syntax changes: bg-red-500/50 stays, but bg-opacity-* utilities removed
  • Content detection is automatic; safelist and content paths often unnecessary

How Nivo migrates Tailwind CSS 3 to Tailwind CSS 4

01

Connect your project

Paste a GitHub URL or upload a ZIP file of your Tailwind CSS 3 project.

02

Nivo detects your Tailwind CSS 3 project

The engine scans your codebase to identify Tailwind CSS 3 patterns, APIs, and configuration that need updating.

03

AI applies all Tailwind CSS 4 migration transforms

Hybrid AST + AI engine applies deterministic transforms for configuration and dependencies, and AI-powered transforms for complex code changes. Every change gets a confidence score.

04

Download migrated codebase + review report

Get a ZIP with your fully migrated code, a complete migration report, and a checklist of items flagged for manual review.

Frequently Asked Questions

What is the biggest change in Tailwind CSS 4?

The most fundamental change is moving from a JavaScript config file (tailwind.config.js) to a CSS-first configuration using the @theme directive. Your design tokens, custom colors, fonts, and spacing are now defined directly in CSS instead of JavaScript.

Do I need to rewrite all my class names?

No. Most class names are unchanged. The main renames are in shadow utilities (shadow-sm to shadow-xs, shadow to shadow-sm) and ring width defaults. Nivo finds and replaces these across all your templates, JSX, and class utility calls.

How long does a Tailwind 3 to 4 migration take?

Most projects complete in under 10 minutes. Nivo scans every file containing class names, your PostCSS config, and your Tailwind config, converting everything to the v4 format in a single pass.

Will my custom Tailwind plugins still work?

Most plugins need updates for v4. The plugin API has changed to use CSS-based @plugin directives. Nivo flags incompatible plugins and migrates simple custom utilities to the new @utility directive format.

Can I migrate Tailwind 3 to 4 in a monorepo?

Yes. Nivo supports monorepo structures and processes each package's Tailwind configuration independently. Shared design tokens can be consolidated into a single @theme import.

Start your Tailwind CSS 3 to Tailwind CSS 4 migration

Start Migration

Free tier available — no credit card required

Related Migrations

Next.js 14Next.js 15

Automatically migrate your Next.js 14 project to Next.js 15. Handles async request APIs, new caching defaults, React 19 integration, and Turbopack changes in minutes.

Framework Upgrade
Create React AppVite

Automatically migrate from Create React App to Vite. Handles config conversion, environment variable prefixes, proxy setup, and react-scripts removal in minutes.

Framework Upgrade
WebpackVite

Automatically migrate from Webpack to Vite. Converts webpack.config.js to vite.config.ts, handles loaders-to-plugins mapping, HMR, and bundle optimization.

Architecture Migration