Building Custom Themes for Tailwind CSS and shadcn/ui

Tailwind CSS and component libraries like shadcn/ui rely on systematic design tokens defined via CSS Custom Properties.

Design and export themes instantly:

• Build complete Tailwind palettes and typography configurations with the Tailwind Theme Builder
• Generate globals.css HSL color variables with the shadcn/ui Theme Generator

Structure of shadcn/ui HSL Tokens

shadcn/ui stores color channels without the hsl() wrapper so Tailwind can dynamically inject opacity modifiers (bg-primary/80):

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

Generate matched light and dark mode variables with the shadcn/ui Theme Generator.