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:
--leading-none is not defined in the default theme
--spacing-none: 0 is found via the --spacing fallback namespace
- 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.
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: 0in@theme, theleading-noneutility outputsline-height: 0instead of the expectedline-height: 1.Reproduction CSS:
Expected:
leading-noneoutputsline-height: 1(as documented and as thestaticValuesfallback intends).Actual:
leading-noneoutputsline-height: 0, sourced from--spacing-none.Root cause in source:
The
leadingutility is defined with theme keys["--leading", "--spacing"]. When resolvingleading-none:--leading-noneis not defined in the default theme--spacing-none: 0is found via the--spacingfallback namespacestaticValues.none(line-height: 1) is never reached because the theme lookup succeeded firstThis means any custom named
--spacing-*value that shares a suffix with aleading-*static value will shadow it. The--spacingfallback is needed for numeric values likeleading-6→calc(var(--spacing) * 6), but named values create unintended collisions.Workaround: Explicitly define
--leading-none: 1in@themeto take priority over the--spacingfallback.Note: The theme documentation describes
--spacing-*as affecting "spacing and sizing utilities likepx-4,max-h-16" — line-height is not mentioned as affected. This behavior contradicts that documentation.