Undefined Mode

Build with undefined primary and secondary colors

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.

Usage
bg-undefined-500
States
hover:bg-undefined-600
Text
text-undefined-700
// Tailwind config (extend colors)
theme: {
  extend: {
    colors: {
      primary: { 500: 'rgb(var(--color-primary) / )' },
      secondary: { 500: 'rgb(var(--color-secondary) / )' },
    }
  }
}
            

Features using undefined colors

Configure the palette once and use utility classes like bg-undefined-500, text-undefined-600, border-undefined-400 across the app.

Performance

Lightweight and fast with Tailwind’s utility-first approach.

Reliability

Sturdy components built to scale with your product.

Customizable

Tweak colors by updating CSS variables in the head.

Ready to define your brand?

Set --color-primary and --color-secondary, then enjoy consistent tokens across Tailwind.