Support spacing scale as line-height modifiers (#14966)

This PR fixes an issue where utilities like `text-sm/6` failed to
include a line-height because `--leading-6` is no longer an explicitly
defined theme value by default.

I don't really love seeing `calc(var(--spacing) * 9)` in the output here
admittedly and it's making me consider again if we should register this
variable as `inline` so we see the final computed value in the CSS, but
if we do that it's something we should change in a separate PR.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don't reset horizontal padding on date/time pseudo-elements ([#14959](https://github.com/tailwindlabs/tailwindcss/pull/14959))
 - Don't emit `calc()` with invalid values for bare values that aren't integers in spacing utilities ([#14962](https://github.com/tailwindlabs/tailwindcss/pull/14962))
+- Ensure spacing scale values work as line-height modifiers ([#14966](https://github.com/tailwindlabs/tailwindcss/pull/14966))
 
 ## [4.0.0-alpha.32] - 2024-11-11
 

packages/tailwindcss/src/utilities.test.ts

@@ -14811,11 +14811,10 @@ test('text', async () => {
     await compileCss(
       css`
         @theme {
+          --spacing: 0.25rem;
           --color-red-500: #ef4444;
-          --leading-6: 1.5rem;
           --text-sm: 0.875rem;
           --text-sm--line-height: 1.25rem;
-          --leading-9: 2.25rem;
         }
         @tailwind utilities;
       `,
@@ -14868,11 +14867,10 @@ test('text', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root {
+      --spacing: .25rem;
       --color-red-500: #ef4444;
-      --leading-6: 1.5rem;
       --text-sm: .875rem;
       --text-sm--line-height: 1.25rem;
-      --leading-9: 2.25rem;
     }
 
     .text-sm {
@@ -14882,32 +14880,32 @@ test('text', async () => {
 
     .text-\\[12px\\]\\/6 {
       font-size: 12px;
-      line-height: var(--leading-6);
+      line-height: calc(var(--spacing) * 6);
     }
 
     .text-\\[50\\%\\]\\/6 {
       font-size: 50%;
-      line-height: var(--leading-6);
+      line-height: calc(var(--spacing) * 6);
     }
 
     .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
       font-size: clamp(1rem, var(--size), 3rem);
-      line-height: var(--leading-9);
+      line-height: calc(var(--spacing) * 9);
     }
 
     .text-\\[larger\\]\\/6 {
       font-size: larger;
-      line-height: var(--leading-6);
+      line-height: calc(var(--spacing) * 6);
     }
 
     .text-\\[xx-large\\]\\/6 {
       font-size: xx-large;
-      line-height: var(--leading-6);
+      line-height: calc(var(--spacing) * 6);
     }
 
     .text-sm\\/6 {
       font-size: var(--text-sm);
-      line-height: var(--leading-6);
+      line-height: calc(var(--spacing) * 6);
     }
 
     .text-sm\\/\\[4px\\] {

packages/tailwindcss/src/utilities.ts

@@ -3902,6 +3902,12 @@ export function createUtilities(theme: Theme) {
                 ? candidate.modifier.value
                 : theme.resolve(candidate.modifier.value, ['--leading'])
 
+            if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
+              let multiplier = theme.resolve(null, ['--spacing'])
+              if (!multiplier) return null
+              modifier = `calc(${multiplier} * ${candidate.modifier.value})`
+            }
+
             if (modifier) {
               return [decl('font-size', value), decl('line-height', modifier)]
             }
@@ -3942,6 +3948,12 @@ export function createUtilities(theme: Theme) {
               ? candidate.modifier.value
               : theme.resolve(candidate.modifier.value, ['--leading'])
 
+          if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
+            let multiplier = theme.resolve(null, ['--spacing'])
+            if (!multiplier) return null
+            modifier = `calc(${multiplier} * ${candidate.modifier.value})`
+          }
+
           let declarations = [decl('font-size', fontSize)]
           modifier && declarations.push(decl('line-height', modifier))
           return declarations