Convert a shadcn/ui theme from Tailwind v3 to v4

Paste a Tailwind v3 shadcn/ui globals.css with HSL variables and get Tailwind v4 CSS with OKLCH colors, @theme inline mappings and chart and sidebar tokens.

Your Tailwind v3 CSS

Paste your :root and .dark blocks, or load the example, to see the converted theme.

How it works

1
Paste the :root and .dark blocks from your existing globals.css. Bare HSL channels (222.2 47.4% 11.2%), hsl(), hex and rgb all work.
2
Every color is converted to OKLCH, missing tokens such as chart-1…5 and sidebar-* are derived from your palette, and a dark mode is generated if you don't have one.
3
Copy the Tailwind v4 CSS, or open the converted theme in the editor to keep tweaking it.

FAQ

Do I still need tailwind.config.js?

Not for colors. In Tailwind v4 the @theme inline block in your CSS replaces the colors and borderRadius sections of the config file. The output includes it.

Will my colors change?

No. OKLCH can represent every sRGB color, so converted colors look identical. Only the notation changes.

Is my CSS uploaded anywhere?

No. Conversion runs entirely in your browser.

More tools

Theme switcher builder

Pick several shadcn/ui themes and install them all at once, with a ready-made theme picker, a hook and a no-flash script, using a single shadcn CLI command.

OKLCH color converter

Convert hex, HSL and RGB colors to OKLCH, and back, for Tailwind v4 and shadcn/ui. Convert one color or a whole list of CSS variables at once.

Theme contrast checker

Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors.

Image to theme

Upload a logo, screenshot or photo and get a complete shadcn/ui theme built from its colors, with accessible light and dark palettes, ready to export.

Compare themes

Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.

Color scale generator

Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme.