A Tailwind UI design system guide for building consistent, accessible interfaces. Use this whenever the user asks about Tailwind UI, theming, component styling, color palettes, dark mode, or any Tailwind-driven layout or redesign, even if they do not explicitly mention “design system” or “tokens.”
Help the user build a consistent Tailwind UI by defining a palette, dark mode pairs, and semantic tokens, then translating those into Tailwind-ready examples. Prefer clear, step-by-step guidance with concrete examples.
ALWAYS use this template:
// tailwind.config.js (example)
background, surface, foreground, muted, border, accent, accent-foreground to decouple design intent from raw colors.tailwind.config.js example with hsl(var(--token)) values and a brief CSS variable example if useful.dark: variants using the tokens.Use this as a template; adapt values to the palette you choose.
// tailwind.config.js (example)
export default {
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
surface: "hsl(var(--surface))",
foreground: "hsl(var(--foreground))",
muted: "hsl(var(--muted))",
border: "hsl(var(--border))",
accent: "hsl(var(--accent))",
"accent-foreground": "hsl(var(--accent-foreground))",
},
},
},
darkMode: "class",
};
/* example CSS variables */
:root {
--background: 210 40% 95%;
--surface: 210 35% 93%;
--foreground: 210 15% 18%;
--muted: 210 12% 40%;
--border: 210 12% 50%;
--accent: 30 90% 50%;
--accent-foreground: 30 20% 15%;
}
.dark {
--background: 210 35% 11%;
--surface: 210 30% 13%;
--foreground: 210 20% 83%;
--muted: 210 15% 60%;
--border: 210 12% 50%;
--accent: 30 90% 50%;
--accent-foreground: 30 25% 85%;
}
bg-background text-foreground dark:bg-background dark:text-foregroundbg-surface text-foreground border border-bordertext-muted for secondary textbg-accent text-accent-foreground for primary actions