[v4] Custom named --spacing-* values shadow leading-none staticValues (e.g. --spacing-none: 0 causes line-height: 0)

[nayukata]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

Vite 7.x (Next.js 16.x)

What version of Node.js are you using?

v22.x

What browser are you using?

N/A (build output issue)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/8zse4OUjaq

Describe your issue

When defining a custom named spacing value --spacing-none: 0 in @theme, the leading-none utility outputs line-height: 0 instead of the expected line-height: 1.

Reproduction CSS:

@import "tailwindcss";

@theme {
  --spacing-none: 0;
}

<p class="leading-none">This text has line-height: 0 instead of 1</p>

Expected: leading-none outputs line-height: 1 (as documented and as the staticValues fallback intends).

Actual: leading-none outputs line-height: 0, sourced from --spacing-none.

Root cause in source:

The leading utility is defined with theme keys ["--leading", "--spacing"]. When resolving leading-none:

1. --leading-none is not defined in the default theme
2. --spacing-none: 0 is found via the --spacing fallback namespace
3. The staticValues.none (line-height: 1) is never reached because the theme lookup succeeded first

This means any custom named --spacing-* value that shares a suffix with a leading-* static value will shadow it. The --spacing fallback is needed for numeric values like leading-6 → calc(var(--spacing) * 6), but named values create unintended collisions.

Workaround: Explicitly define --leading-none: 1 in @theme to take priority over the --spacing fallback.

@theme {
  --spacing-none: 0;
  --leading-none: 1; /* prevent --spacing-none from overriding */
}

Note: The theme documentation describes --spacing-* as affecting "spacing and sizing utilities like px-4, max-h-16" — line-height is not mentioned as affected. This behavior contradicts that documentation.