Tailwind v3 to v4 Config Converter

Instantly migrate your Tailwind CSS v3 `tailwind.config.js` to the new v4 CSS Variables format (`@theme`). All conversion happens securely in your browser.

1 Tailwind v3 Config (JS)
2 Tailwind v4 CSS (@theme)
🔒 100% Client-Side - No data is sent to a server.
Migrating full stack? Try our Prisma to Drizzle Converter →

How to convert Tailwind v3 to v4

  1. Paste your `tailwind.config.js`: Copy the entire contents of your Tailwind v3 configuration file into the left editor.
  2. Click Convert: The tool will safely parse the JavaScript object and map your `theme` and `theme.extend` properties to the new v4 CSS syntax.
  3. Copy and Paste: Copy the generated `@theme` CSS block and paste it into your `globals.css` or `app.css` file where Tailwind is imported.

Why migrate to Tailwind CSS v4?

Tailwind CSS v4 introduces a massive paradigm shift: the configuration is now entirely CSS-driven. Instead of maintaining a bulky `tailwind.config.js` file, all design tokens (colors, spacing, typography) are defined using native CSS variables inside an `@theme` directive.

This shift enables much faster build times, seamless integration with modern CSS features, and a simplified developer experience. Our Tailwind upgrade tool helps you bridge the gap by automating the translation of your legacy JavaScript configuration into modern CSS variables.

Frequently Asked Questions

What happens to plugins in v4?

In Tailwind v4, many plugins are no longer needed or are implemented differently. This converter focuses specifically on the `theme` and `theme.extend` objects. You may need to manually update your plugin imports in your CSS file using the `@plugin` directive.

Does it support nested color objects?

Yes! The converter recursively flattens nested color objects (like `primary: { 50: '#fff', 100: '#eee' }`) into standard Tailwind CSS variables (e.g., `--color-primary-50: #fff;`).

Is this tool secure?

Absolutely. The entire conversion process happens locally in your web browser. Your configuration files are never uploaded to any server, ensuring complete privacy for your internal design tokens.

How does Tailwind v4 handle custom fonts?

In v4, font families are defined via CSS variables such as `--font-sans` or `--font-custom`. Our tool automatically parses the `fontFamily` object in your legacy configuration and generates the correct CSS variable syntax, safely quoting font names with spaces.

Can I still use JavaScript for dynamic values?

Tailwind CSS v4 pushes heavily toward CSS-only configuration. If you relied on JavaScript logic (like `Math.random()` or complex functions) within `tailwind.config.js`, you will need to replace those with native CSS functions (like `calc()`) in your final stylesheet.

Why do I see an `@theme` block?

The `@theme` directive is a new feature in Tailwind v4 that allows you to register CSS variables into Tailwind's internal design token system. Defining a variable like `--color-brand: #ff0;` inside `@theme` makes `bg-brand` and `text-brand` automatically available in your utility classes.

Do I need to keep my tailwind.config.js?

Once you fully migrate your design tokens to your main CSS file and update any plugins, you can typically delete your `tailwind.config.js` completely. However, we recommend keeping it as a backup until you have verified your UI compiles correctly.

What about screen sizes and breakpoints?

Tailwind v4 handles media queries using variables like `--breakpoint-md` or `--breakpoint-xl`. When you paste a `tailwind.config.js` with custom `screens`, our tool maps those to the corresponding `--breakpoint-*` CSS variables automatically.

Success message!