Tailwind v3 config to v4

Paste a tailwind.config.js and get the v4 CSS it becomes: an @theme block with the right variable namespaces, and a note for every part that needs a decision.

js
CSS entry filecss
The result appears here

Questions

Which parts convert automatically?+

Everything in theme and theme.extend that has a v4 namespace: colors, spacing, fonts, sizes, radii, shadows, screens, z-index, durations and easings. Nested keys flatten into the variable name, and DEFAULT drops out of it.

What happens to plugins and requires?+

They cannot be evaluated in a browser, so lines carrying code are skipped and reported. Plugins become one @plugin line each in v4, and a required palette has to be written out as values.

And keyframes and animations?+

The animation shorthand maps to --animate-*, but the keyframes themselves stay CSS at-rules. Copy them into the same file, outside the @theme block.

Related tools

CSS to TailwindTurn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.CVA variant builderWrite variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version