#19722·Tailwind CSS

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

Author: nayukataCreated Feb 25, 2026Updated Sep 12, 2026
**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: ```css @import "tailwindcss"; @theme { --spacing-none: 0; } ``` ```html

This text has line-height: 0 instead of 1

``` **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. ```css @theme { --spacing-none: 0; --leading-none: 1; /* prevent --spacing-none from overriding */ } ``` **Note:** The [theme documentation](https://tailwindcss.com/docs/theme#spacing) 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.

Source: tailwindlabs/tailwindcss