Tailwind Theme Generator

shadcn/ui-compatible :root / .dark / @theme inline for Tailwind v4

Preset

Primary

Destructive

Radius

0.500rem

acme.app/dashboard

background

foreground

primary

primary-fg

secondary

muted

accent

destructive

border

Acme

DashboardAnalyticsSettings

Total Revenue

$45,231

+20.1%

Active Users

2,350

+15.3%

Churn Rate

3.2%

-4.1%

Monthly Overview

Last 6 months

JanFebMarAprMayJun

New Project

Project name

Framework

Public repositoryInitialize with README

Preferences

Email notificationsDark mode

Status Tags

ActivePendingErrorDraft

Deployment complete

Your app is live at acme.com

Usage

API

Storage

Bandwidth

Compute

Recent Deployments

acme-web

main

Active

2m ago

acme-api

feat/v2

Building

4m ago

acme-admin

main

Failed

10m ago

Inputs

Progress

API calls75%

Storage42%

Bandwidth88%

globals.css

143 lines

:root {
  --background: oklch(1.0000 0.0000 0.0000);
  --foreground: oklch(0.3211 0.0000 0.0000);
  --card: oklch(1.0000 0.0000 0.0000);
  --card-foreground: oklch(0.3211 0.0000 0.0000);
  --popover: oklch(1.0000 0.0000 0.0000);
  --popover-foreground: oklch(0.3211 0.0000 0.0000);
  --primary: oklch(0.5854 0.2041 277.1173);
  --primary-foreground: oklch(0.1450 0.0000 0.0000);
  --secondary: oklch(0.9670 0.0033 277.1173);
  --secondary-foreground: oklch(0.4461 0.0286 277.1173);
  --muted: oklch(0.9846 0.0018 277.1173);
  --muted-foreground: oklch(0.5510 0.0255 277.1173);
  --accent: oklch(0.9514 0.0271 277.1173);
  --accent-foreground: oklch(0.3791 0.1498 277.1173);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0.0000 0.0000);
  --border: oklch(0.9276 0.0063 277.1173);
  --input: oklch(0.9276 0.0063 277.1173);
  --ring: oklch(0.5854 0.2041 277.1173);
  --chart-1: oklch(0.5854 0.2041 277.1173);
  --chart-2: oklch(0.5064 0.2347 277.1173);
  --chart-3: oklch(0.4494 0.2367 277.1173);
  --chart-4: oklch(0.3864 0.1965 277.1173);
  --chart-5: oklch(0.3414 0.1498 277.1173);
  --sidebar: oklch(0.9846 0.0018 277.1173);
  --sidebar-foreground: oklch(0.3211 0.0000 0.0000);
  --sidebar-primary: oklch(0.5854 0.2041 277.1173);
  --sidebar-primary-foreground: oklch(0.1450 0.0000 0.0000);
  --sidebar-accent: oklch(0.9514 0.0271 277.1173);
  --sidebar-accent-foreground: oklch(0.3791 0.1498 277.1173);
  --sidebar-border: oklch(0.9276 0.0063 277.1173);
  --sidebar-ring: oklch(0.5854 0.2041 277.1173);
  --font-sans: Inter, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.500rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
}

.dark {
  --background: oklch(0.2046 0.0000 0.0000);
  --foreground: oklch(0.9219 0.0000 0.0000);
  --card: oklch(0.2686 0.0000 0.0000);
  --card-foreground: oklch(0.9219 0.0000 0.0000);
  --popover: oklch(0.2686 0.0000 0.0000);
  --popover-foreground: oklch(0.9219 0.0000 0.0000);
  --primary: oklch(0.5854 0.2041 277.1173);
  --primary-foreground: oklch(0.1450 0.0000 0.0000);
  --secondary: oklch(0.2686 0.0000 0.0000);
  --secondary-foreground: oklch(0.9219 0.0000 0.0000);
  --muted: oklch(0.2393 0.0000 0.0000);
  --muted-foreground: oklch(0.7155 0.0000 0.0000);
  --accent: oklch(0.3791 0.1498 277.1173);
  --accent-foreground: oklch(0.8823 0.0620 277.1173);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0.0000 0.0000);
  --border: oklch(0.3715 0.0000 0.0000);
  --input: oklch(0.3715 0.0000 0.0000);
  --ring: oklch(0.5854 0.2041 277.1173);
  --chart-1: oklch(0.6764 0.1561 277.1173);
  --chart-2: oklch(0.5854 0.2041 277.1173);
  --chart-3: oklch(0.5064 0.2347 277.1173);
  --chart-4: oklch(0.4494 0.2367 277.1173);
  --chart-5: oklch(0.3864 0.1965 277.1173);
  --sidebar: oklch(0.2046 0.0000 0.0000);
  --sidebar-foreground: oklch(0.9219 0.0000 0.0000);
  --sidebar-primary: oklch(0.5854 0.2041 277.1173);
  --sidebar-primary-foreground: oklch(0.1450 0.0000 0.0000);
  --sidebar-accent: oklch(0.3791 0.1498 277.1173);
  --sidebar-accent-foreground: oklch(0.8823 0.0620 277.1173);
  --sidebar-border: oklch(0.3715 0.0000 0.0000);
  --sidebar-ring: oklch(0.5854 0.2041 277.1173);
  --font-sans: Inter, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.500rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

What is a Tailwind Theme Generator?

A Tailwind theme generator lets you visually design a complete color system for your Tailwind CSS v4 project. Instead of hand-writing CSS custom properties, you pick a primary color and the tool derives all semantic tokens — background, foreground, card, muted, accent, destructive, borders, and more — using the perceptually uniform OKLCH color space. The output is a drop-in :root / .dark / @theme inline CSS block compatible with shadcn/ui components.

How to use

1.Pick a Primary color using the color picker or a preset. All semantic tokens are automatically derived from it.
2.Optionally change the Destructive color (used for errors and danger states) and adjust the corner Radius slider.
3.Toggle between light and dark mode to preview both themes in the live preview panel.
4.Click Copy CSS to copy the generated block, then paste it into your globals.css file right after @import "tailwindcss".
5.All shadcn/ui components that use tokens like --primary, --muted, and --card will pick up your new theme instantly.

About the output format

The generated CSS follows the shadcn/ui + Tailwind v4 convention — the same format used by npx shadcn init. Colors are expressed in OKLCH with decimal lightness (e.g. oklch(0.6231 0.1880 259.81)), which gives perceptually uniform results across hues and is natively supported in all modern browsers.

The @theme inline block maps every CSS custom property to a Tailwind utility, so you can use classes like bg-primary, text-muted-foreground, and border-border directly in your JSX.

Token reference

Token	Purpose
--background / --foreground	Page background and default text color
--card / --card-foreground	Card surface and its text
--primary / --primary-foreground	Brand color and its foreground (auto: white or near-black)
--secondary / --secondary-foreground	Subtle alternative to primary — used for secondary buttons
--muted / --muted-foreground	De-emphasized surfaces and placeholder text
--accent / --accent-foreground	Highlighted/hovered state backgrounds
--destructive / --destructive-foreground	Error and danger states
--border	Default border color for all UI elements
--input	Input field border (separate token for override flexibility)
--ring	Focus ring — matches primary by default
--chart-1 … --chart-5	Data visualization palette derived from primary hue
--sidebar / --sidebar-*	Sidebar-specific variants of the above tokens
--radius	Base border-radius — sm/md/lg/xl are computed from this

:root { --background: oklch(1.0000 0.0000 0.0000); --foreground: oklch(0.3211 0.0000 0.0000); --card: oklch(1.0000 0.0000 0.0000); --card-foreground: oklch(0.3211 0.0000 0.0000); --popover: oklch(1.0000 0.0000 0.0000); --popover-foreground: oklch(0.3211 0.0000 0.0000); --primary: oklch(0.5854 0.2041 277.1173); --primary-foreground: oklch(0.1450 0.0000 0.0000); --secondary: oklch(0.9670 0.0033 277.1173); --secondary-foreground: oklch(0.4461 0.0286 277.1173); --muted: oklch(0.9846 0.0018 277.1173); --muted-foreground: oklch(0.5510 0.0255 277.1173); --accent: oklch(0.9514 0.0271 277.1173); --accent-foreground: oklch(0.3791 0.1498 277.1173); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1.0000 0.0000 0.0000); --border: oklch(0.9276 0.0063 277.1173); --input: oklch(0.9276 0.0063 277.1173); --ring: oklch(0.5854 0.2041 277.1173); --chart-1: oklch(0.5854 0.2041 277.1173); --chart-2: oklch(0.5064 0.2347 277.1173); --chart-3: oklch(0.4494 0.2367 277.1173); --chart-4: oklch(0.3864 0.1965 277.1173); --chart-5: oklch(0.3414 0.1498 277.1173); --sidebar: oklch(0.9846 0.0018 277.1173); --sidebar-foreground: oklch(0.3211 0.0000 0.0000); --sidebar-primary: oklch(0.5854 0.2041 277.1173); --sidebar-primary-foreground: oklch(0.1450 0.0000 0.0000); --sidebar-accent: oklch(0.9514 0.0271 277.1173); --sidebar-accent-foreground: oklch(0.3791 0.1498 277.1173); --sidebar-border: oklch(0.9276 0.0063 277.1173); --sidebar-ring: oklch(0.5854 0.2041 277.1173); --font-sans: Inter, sans-serif; --font-serif: Georgia, serif; --font-mono: JetBrains Mono, monospace; --radius: 0.500rem; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10); --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25); } .dark { --background: oklch(0.2046 0.0000 0.0000); --foreground: oklch(0.9219 0.0000 0.0000); --card: oklch(0.2686 0.0000 0.0000); --card-foreground: oklch(0.9219 0.0000 0.0000); --popover: oklch(0.2686 0.0000 0.0000); --popover-foreground: oklch(0.9219 0.0000 0.0000); --primary: oklch(0.5854 0.2041 277.1173); --primary-foreground: oklch(0.1450 0.0000 0.0000); --secondary: oklch(0.2686 0.0000 0.0000); --secondary-foreground: oklch(0.9219 0.0000 0.0000); --muted: oklch(0.2393 0.0000 0.0000); --muted-foreground: oklch(0.7155 0.0000 0.0000); --accent: oklch(0.3791 0.1498 277.1173); --accent-foreground: oklch(0.8823 0.0620 277.1173); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1.0000 0.0000 0.0000); --border: oklch(0.3715 0.0000 0.0000); --input: oklch(0.3715 0.0000 0.0000); --ring: oklch(0.5854 0.2041 277.1173); --chart-1: oklch(0.6764 0.1561 277.1173); --chart-2: oklch(0.5854 0.2041 277.1173); --chart-3: oklch(0.5064 0.2347 277.1173); --chart-4: oklch(0.4494 0.2367 277.1173); --chart-5: oklch(0.3864 0.1965 277.1173); --sidebar: oklch(0.2046 0.0000 0.0000); --sidebar-foreground: oklch(0.9219 0.0000 0.0000); --sidebar-primary: oklch(0.5854 0.2041 277.1173); --sidebar-primary-foreground: oklch(0.1450 0.0000 0.0000); --sidebar-accent: oklch(0.3791 0.1498 277.1173); --sidebar-accent-foreground: oklch(0.8823 0.0620 277.1173); --sidebar-border: oklch(0.3715 0.0000 0.0000); --sidebar-ring: oklch(0.5854 0.2041 277.1173); --font-sans: Inter, sans-serif; --font-serif: Georgia, serif; --font-mono: JetBrains Mono, monospace; --radius: 0.500rem; --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10); --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); }

What is a Tailwind Theme Generator?

How to use

1.Pick a Primary color using the color picker or a preset. All semantic tokens are automatically derived from it.

2.Optionally change the Destructive color (used for errors and danger states) and adjust the corner Radius slider.

3.Toggle between light and dark mode to preview both themes in the live preview panel.

4.Click Copy CSS to copy the generated block, then paste it into your globals.css file right after @import "tailwindcss".

5.All shadcn/ui components that use tokens like --primary, --muted, and --card will pick up your new theme instantly.

About the output format

The @theme inline block maps every CSS custom property to a Tailwind utility, so you can use classes like bg-primary, text-muted-foreground, and border-border directly in your JSX.

Token reference

Token	Purpose
--background / --foreground	Page background and default text color
--card / --card-foreground	Card surface and its text
--primary / --primary-foreground	Brand color and its foreground (auto: white or near-black)
--secondary / --secondary-foreground	Subtle alternative to primary — used for secondary buttons
--muted / --muted-foreground	De-emphasized surfaces and placeholder text
--accent / --accent-foreground	Highlighted/hovered state backgrounds
--destructive / --destructive-foreground	Error and danger states
--border	Default border color for all UI elements
--input	Input field border (separate token for override flexibility)
--ring	Focus ring — matches primary by default
--chart-1 … --chart-5	Data visualization palette derived from primary hue
--sidebar / --sidebar-*	Sidebar-specific variants of the above tokens
--radius	Base border-radius — sm/md/lg/xl are computed from this

Tailwind Theme Generator

What is a Tailwind Theme Generator?

How to use

About the output format

Token reference

Related Tools

Tailwind Theme Generator

What is a Tailwind Theme Generator?

How to use

About the output format

Token reference

Related Tools