This template is ready for your brand. Configure --color-primary and --color-secondary in the head, then use bg-undefined-500, text-undefined-600, border-undefined-400, and more.
// Tailwind config (extend colors) theme: { extend: { colors: { primary: { 500: 'rgb(var(--color-primary) /)' }, secondary: { 500: 'rgb(var(--color-secondary) /)' }, } } }
Configure the palette once and use utility classes like bg-undefined-500, text-undefined-600, border-undefined-400 across the app.
Lightweight and fast with Tailwind’s utility-first approach.
Sturdy components built to scale with your product.
Tweak colors by updating CSS variables in the head.
Set --color-primary and --color-secondary, then enjoy consistent tokens across Tailwind.