Tailwind CSS

Ruixen UI ships components written for Tailwind CSS v4 by default, with full Tailwind CSS v3 support built into the registry.

You don't need a separate site or branch — every component is available in both versions from the same docs.

Choosing your version

Use the Tailwind toggle in the sidebar or on any CLI install command to switch between v4 and v3. You can also choose your UI primitive library from the same panel.

Your selection is saved and persists across pages.

• v4 (default) — Components use Tailwind v4 conventions, including @theme CSS variables and v4-only utilities like inset-shadow-*.
• v3 — The same components, automatically transformed to use hsl(var(--token)) syntax and v3-compatible utilities.

When you toggle to v3, every install command on the site updates:

Compare with v4:

The CLI delivers the correct code for your chosen version — no manual changes needed.

What changes between versions

Most components (95%+) produce identical code for both v3 and v4. The differences only appear in components that use v4-specific features:

Utility classes like bg-card, text-foreground, border-border, and ring-primary work identically in both versions — these are mapped through your project's Tailwind theme config.

Project setup

@import "tailwindcss";
 
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-border: hsl(var(--border));
  /* ...other tokens */
}

Upgrading from v3 to v4

If you want to migrate your project from Tailwind v3 to v4:

1. Follow the official Tailwind CSS v4 upgrade guide.
2. Follow the shadcn/ui Tailwind v4 migration steps.
3. Switch the Ruixen UI toggle to v4 and reinstall any components to get the v4-optimized code.

How it works under the hood

The v3 registry is generated automatically at build time:

1. Components are authored using Tailwind v4 conventions.
2. During pnpm build:registry, a transform converts v4-specific patterns to v3 equivalents.
3. The transformed files are served at /r/tw3/<component>.json.
4. The CLI (npx shadcn@latest add) fetches the right version based on the URL.

The transform only touches known patterns — custom CSS variables, animations, and component logic are never modified.