Back

Custom colors and spacing

You can extend Tailwind's default theme with your own colors and spacing. In Tailwind v4 you define them in CSS with @theme, and they become classes automatically. For one-off values, use square brackets like w-[350px].

/* app/globals.css (Tailwind v4) */
@import "tailwindcss";

@theme {
  --color-brand: #0ea5e9;
  --color-brand-dark: #0369a1;
  --spacing-18: 4.5rem;
}

<!-- Now usable as classes -->
<button class="bg-brand hover:bg-brand-dark p-18">Go</button>

<!-- One-off arbitrary values -->
<div class="w-[350px] bg-[#1e293b]">...</div>

Roadmap