How do I add custom colors, fonts and breakpoints in Tailwind 4 with @theme?

CSS-first configuration

Theme values are CSS variables defined in an @theme block. Each variable namespace produces utilities automatically.

@import "tailwindcss";

@theme {
  /* colors -> bg-brand-500, text-brand-500, border-brand-500 ... */
  --color-brand-50: oklch(0.97 0.02 260);
  --color-brand-500: oklch(0.62 0.19 260);
  --color-brand-900: oklch(0.30 0.10 260);

  /* fonts -> font-display */
  --font-display: "Fraunces", ui-serif, serif;

  /* breakpoints -> 3xl:flex */
  --breakpoint-3xl: 120rem;

  /* spacing base unit -> p-4 = 4 * 0.25rem */
  --spacing: 0.25rem;

  /* radius -> rounded-card */
  --radius-card: 0.75rem;
}

Now bg-brand-500, font-display, 3xl:grid-cols-6 and rounded-card work, with no config file.

Namespaces

--color-*, --font-*, --text-* (font sizes), --breakpoint-*, --spacing-*, --radius-*, --shadow-*, --ease-*, --animate-*.

Override or reset a namespace

Setting --color-*: initial; inside @theme removes all default colors so only yours remain. You can remove a single one with --color-lime-400: initial;.

Reference the values anywhere

Theme values become real CSS variables on :root, so plain CSS can use var(--color-brand-500). By default only variables that are actually used (by a utility or a var() reference in your CSS) are emitted; write @theme static { ... } to always emit all of them. Use @theme inline { ... } when a value refers to another variable and you want the utility to inline it (important for values like --font-sans: var(--font-inter) with Next.js fonts).

Pitfalls

• @theme must be at the top level, not nested in a selector or media query. For runtime-switchable themes define variables in :root / [data-theme] and point @theme inline entries to them.
• Shade tools help; try the Tailwind color shade generator and then paste the values as variables.