Tailwind & shadcn

Theme tokens, class utilities and registry helpers for Tailwind v4 and shadcn/ui.

CSS to Tailwind

Turn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.

CVA variant builder

Write variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.

shadcn registry.json builder

Fill in a form and get a valid registry item and registry.json, with the file types inferred and the rules the shadcn CLI enforces checked as you type.

Tailwind class merge playground

See exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.

Tailwind class sorter

Put a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify.

Tailwind color scale generator

Turn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.

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.

Markdown version