Xtractlytractly

Free · No sign-up · v3 → v4

Tailwind v3 config,to v4 CSS.

Tailwind v4 moved configuration into CSS. Paste your tailwind.config.js and get the equivalent: theme values in v4's namespaces, plugins as @plugin, class-based dark mode as a custom variant — and a list of anything that needs a human.

tailwind.config.js

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-brand-600: #4b55b8;
  --color-brand: #5e6ad2;
  --color-surface: #f7f8f8;
  --font-sans: Inter, sans-serif;
  --text-hero: 4rem;
  --text-hero--line-height: 1;
  --text-hero--letter-spacing: -0.04em;
  --radius-card: 14px;
}

@utility z-modal {
  z-index: 60;
}
Want these from a live site? The Xtractly extension reads them off any page →
  • content: v4 finds your source files automatically; add @source "…" only for paths it misses (e.g. a package in node_modules).

Runs in your browser — nothing you paste is uploaded or stored.

How to move a Tailwind theme to v4, in three steps.

01

Paste the config

The whole tailwind.config.js (or .ts), or just its theme: { … } part. Nothing is evaluated — require() calls and functions are read as text and reported, not run.

02

Read the notes

Values that only exist at runtime (colors.slate, theme() functions, inline plugins) are listed under the output instead of guessed. v4 ships the default palette as variables, so most become var(--color-slate-500).

03

Replace your CSS entry

Swap the three @tailwind directives in your main CSS file for the output, then delete tailwind.config.js. Keeping it for a while? Load it with @config instead.

Questions

Do I still need tailwind.config.js in Tailwind v4?

No. v4 is configured in CSS: theme values live in an @theme block, plugins load with @plugin and custom variants with @custom-variant. A JavaScript config still works through the @config directive, which helps when you migrate gradually.

How is this different from the official upgrade tool?

The official npx @tailwindcss/upgrade migrates a whole project, including renamed classes in your templates. This converts the config only, in your browser, and shows each mapping — useful to review the theme, or when you can't run the tool on the codebase.

Why does the output reset a namespace with initial?

A key set directly under theme (not under extend) replaced Tailwind's defaults in v3. In v4 the same thing is written as, for example, --breakpoint-*: initial; followed by your values, which clears the defaults before adding yours.

What happens to my plugins?

Packages loaded with require() become @plugin "package-name" lines. Inline plugin functions can't be converted automatically; the notes list them so you can port them to @utility and @custom-variant.

Which theme keys are converted?

Colours, font families and sizes (with line height, letter spacing and weight), font weights, letter spacing, line heights, screens, max widths, spacing, border radius, shadows, drop shadows, blur, aspect ratios, easing, animations and keyframes. Named keys like zIndex.modal become @utility rules.

More free tools, same idea.

Each one runs in your browser and works on tokens you already have.

Guide: move a Tailwind theme to v4Website to TailwindComponent extractionAll free tools

Migrating a theme is the easy half.

Read it off any live site.

Xtractly's extension reads the tokens a live site actually renders — yours or one you admire — and exports them straight to a v4 @theme, with components in classes that work on v3 and v4.

Add to Chrome, free