Migrating from V3

Learn how to migrate from v3 to v4.

What's new?

The CLI now initializes projects with Tailwind v4. You can find v3 components here.
All components are updated for Tailwind v4 and React 19.
Removed utility class components.

Visit changelog to see all the changes.

1. Follow the Tailwind v4 Upgrade Guide

Upgrade to Tailwind v4 by following the official upgrade guide
Use the @tailwindcss/upgrade @next codemod to remove deprecated utility classes and update tailwind config.

2. Upgrade your dependencies

Upgrade React dependencies

If you're using Next.js, you can upgrade React and React DOM to the latest version by running the following command:

npx @next/codemod@canary upgrade latest

Visit Next.js upgrade guide for more info.

Otherwise, you can upgrade React and React DOM to the latest version by running the following command:

pnpm up react react-dom --latest

Upgrade other dependencies

pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest

3. Deprecate tailwindcss-animate

We've deprecated tailwindcss-animate in favor of tw-animate-css, so you'll have to install tw-animate-css and remove tailwindcss-animate from your project.

pnpm add tw-animate-css

pnpm remove tailwindcss-animate

4. Update styling

Delete the tailwind config file and paste desired styling to your globals.css file.

5. Set cssVariables to true inside components.json if you haven't already

5. Install v4 components

Install new components like you would usually do.

6. Update old styling (page styling not components)

These are new variable names:

Old variable name	New variable name	Description
bg	background	Background color
bw	secondary-background	Secondary background color
text	foreground	Text color
mtext	main-foreground	Text color when background is set to main

Utility class styling upgrade

Old styling classes	New styling classes
bg-bg dark:bg-darkBg	bg-background
bg-white dark:bg-secondaryBlack	bg-secondary-background
border-border dark:border-darkBorder	border-border
shadow-light dark:shadow-dark	shadow-shadow
text-text dark:text-darkText	text-foreground
text-text	text-main-foreground

CSS Variables classes styling upgrade

Old styling classes	New styling classes
bg-bg	bg-background
bg-bw	bg-secondary-background
text-text	text-foreground
text-mtext	text-main-foreground