Rename --line-height-* variables to --leading-*

CHANGELOG.md

@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
 - Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
 - Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
+- Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
 - Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
 
 ## [4.0.0-alpha.31] - 2024-10-29

integrations/upgrade/js-config.test.ts

@@ -117,6 +117,9 @@ test(
               letterSpacing: {
                 superWide: '0.25em',
               },
+              lineHeight: {
+                superLoose: '3',
+              },
             },
           },
           plugins: [],
@@ -135,7 +138,7 @@ test(
       `,
       'src/index.html': html`
        <div
-          class="[letter-spacing:theme(letterSpacing.superWide)]"
+          class="[letter-spacing:theme(letterSpacing.superWide)] [line-height:theme(lineHeight.superLoose)]"
         ></div>
       `,
       'node_modules/my-external-lib/src/template.html': html`
@@ -152,7 +155,7 @@ test(
       "
       --- src/index.html ---
       <div
-         class="[letter-spacing:var(--tracking-super-wide)]"
+         class="[letter-spacing:var(--tracking-super-wide)] [line-height:var(--leading-super-loose)]"
        ></div>
 
       --- src/input.css ---
@@ -238,6 +241,8 @@ test(
 
         --tracking-super-wide: 0.25em;
 
+        --leading-super-loose: 3;
+
         @keyframes spin-clockwise {
           0% {
             transform: rotate(0deg);

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -355,12 +355,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --tracking-widest: .1em;
-    --line-height-none: 1;
-    --line-height-tight: 1.25;
-    --line-height-snug: 1.375;
-    --line-height-normal: 1.5;
-    --line-height-relaxed: 1.625;
-    --line-height-loose: 2;
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
     --perspective-dramatic: 100px;
     --perspective-near: 300px;
     --perspective-normal: 500px;

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -354,12 +354,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --tracking-wide: .025em;
   --tracking-wider: .05em;
   --tracking-widest: .1em;
-  --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
   --perspective-dramatic: 100px;
   --perspective-near: 300px;
   --perspective-normal: 500px;

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -54,6 +54,10 @@ test('config values can be merged into the theme', () => {
             superWide: '0.25em',
           },
 
+          lineHeight: {
+            superLoose: '3',
+          },
+
           width: {
             // Purposely setting to something different from the default
             '1/2': '60%',
@@ -93,6 +97,7 @@ test('config values can be merged into the theme', () => {
     { '--line-height': '1.5' },
   ])
   expect(theme.resolve('super-wide', ['--tracking'])).toEqual('0.25em')
+  expect(theme.resolve('super-loose', ['--leading'])).toEqual('3')
   expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
   expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
   expect(theme.resolve('100%', ['--width'])).toEqual('100%')

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -137,6 +137,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'fontFamily') path[0] = 'font'
   if (path[0] === 'fontSize') path[0] = 'text'
   if (path[0] === 'letterSpacing') path[0] = 'tracking'
+  if (path[0] === 'lineHeight') path[0] = 'leading'
   if (path[0] === 'maxWidth') path[0] = 'container'
   if (path[0] === 'screens') path[0] = 'breakpoint'
   if (path[0] === 'transitionTimingFunction') path[0] = 'ease'

packages/tailwindcss/src/compat/config.test.ts

@@ -1539,6 +1539,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
 
         --tracking-a: 1;
         --tracking-b: 2;
+
+        --leading-a: 1;
+        --leading-b: 2;
       }
 
       @plugin "./plugin.js";
@@ -1605,6 +1608,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
               a: '1',
               b: '2',
             })
+
+            expect(theme('lineHeight.a')).toEqual('1')
+            expect(theme('lineHeight.b')).toEqual('2')
+
+            expect(theme('lineHeight')).toMatchObject({
+              a: '1',
+              b: '2',
+            })
           }),
         }
       },

packages/tailwindcss/src/compat/config/create-compat-config.ts

@@ -38,6 +38,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
           ...theme('tracking', {}),
         }),
 
+        lineHeight: ({ theme }) => ({
+          ...theme('leading', {}),
+        }),
+
         transitionDuration: {
           DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
         },

packages/tailwindcss/src/css-functions.test.ts

@@ -640,6 +640,7 @@ describe('theme function', () => {
         ['maxWidth.xs', '20rem'],
         ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
         ['letterSpacing.wide', '.025em'],
+        ['lineHeight.tight', '1.25'],
         ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
       ])('theme(%s) → %s', async (value, result) => {
         let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')

packages/tailwindcss/src/utilities.test.ts

@@ -14036,22 +14036,22 @@ test('leading', async () => {
     await compileCss(
       css`
         @theme {
-          --line-height-none: 1;
-          --line-height-6: 1.5rem;
+          --leading-none: 1;
+          --leading-6: 1.5rem;
         }
         @tailwind utilities;
       `,
       ['leading-none', 'leading-6', 'leading-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --line-height-none: 1;
-      --line-height-6: 1.5rem;
+      --leading-none: 1;
+      --leading-6: 1.5rem;
     }
 
     .leading-6 {
-      --tw-leading: var(--line-height-6);
-      line-height: var(--line-height-6);
+      --tw-leading: var(--leading-6);
+      line-height: var(--leading-6);
     }
 
     .leading-\\[var\\(--value\\)\\] {
@@ -14060,8 +14060,8 @@ test('leading', async () => {
     }
 
     .leading-none {
-      --tw-leading: var(--line-height-none);
-      line-height: var(--line-height-none);
+      --tw-leading: var(--leading-none);
+      line-height: var(--leading-none);
     }
 
     @supports (-moz-orient: inline) {
@@ -14660,10 +14660,10 @@ test('text', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
-          --line-height-6: 1.5rem;
+          --leading-6: 1.5rem;
           --text-sm: 0.875rem;
           --text-sm--line-height: 1.25rem;
-          --line-height-9: 2.25rem;
+          --leading-9: 2.25rem;
         }
         @tailwind utilities;
       `,
@@ -14717,10 +14717,10 @@ test('text', async () => {
   ).toMatchInlineSnapshot(`
     ":root {
       --color-red-500: #ef4444;
-      --line-height-6: 1.5rem;
+      --leading-6: 1.5rem;
       --text-sm: .875rem;
       --text-sm--line-height: 1.25rem;
-      --line-height-9: 2.25rem;
+      --leading-9: 2.25rem;
     }
 
     .text-sm {
@@ -14730,32 +14730,32 @@ test('text', async () => {
 
     .text-\\[12px\\]\\/6 {
       font-size: 12px;
-      line-height: var(--line-height-6);
+      line-height: var(--leading-6);
     }
 
     .text-\\[50\\%\\]\\/6 {
       font-size: 50%;
-      line-height: var(--line-height-6);
+      line-height: var(--leading-6);
     }
 
     .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
       font-size: clamp(1rem, var(--size), 3rem);
-      line-height: var(--line-height-9);
+      line-height: var(--leading-9);
     }
 
     .text-\\[larger\\]\\/6 {
       font-size: larger;
-      line-height: var(--line-height-6);
+      line-height: var(--leading-6);
     }
 
     .text-\\[xx-large\\]\\/6 {
       font-size: xx-large;
-      line-height: var(--line-height-6);
+      line-height: var(--leading-6);
     }
 
     .text-sm\\/6 {
       font-size: var(--text-sm);
-      line-height: var(--line-height-6);
+      line-height: var(--leading-6);
     }
 
     .text-sm\\/\\[4px\\] {

packages/tailwindcss/src/utilities.ts

@@ -3609,7 +3609,7 @@ export function createUtilities(theme: Theme) {
   staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']])
   staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']])
 
-  spacingUtility('leading', ['--line-height'], (value) => [
+  spacingUtility('leading', ['--leading'], (value) => [
     atRoot([property('--tw-leading')]),
     decl('--tw-leading', value),
     decl('line-height', value),
@@ -3880,7 +3880,7 @@ export function createUtilities(theme: Theme) {
             let modifier =
               candidate.modifier.kind === 'arbitrary'
                 ? candidate.modifier.value
-                : theme.resolve(candidate.modifier.value, ['--line-height'])
+                : theme.resolve(candidate.modifier.value, ['--leading'])
 
             if (modifier) {
               return [decl('font-size', value), decl('line-height', modifier)]
@@ -3920,7 +3920,7 @@ export function createUtilities(theme: Theme) {
           let modifier =
             candidate.modifier.kind === 'arbitrary'
               ? candidate.modifier.value
-              : theme.resolve(candidate.modifier.value, ['--line-height'])
+              : theme.resolve(candidate.modifier.value, ['--leading'])
 
           let declarations = [decl('font-size', fontSize)]
           modifier && declarations.push(decl('line-height', modifier))
@@ -3964,7 +3964,7 @@ export function createUtilities(theme: Theme) {
       values: [],
       valueThemeKeys: ['--text'],
       modifiers: [],
-      modifierThemeKeys: ['--line-height'],
+      modifierThemeKeys: ['--leading'],
     },
   ])
 

packages/tailwindcss/tests/ui.spec.ts

@@ -508,7 +508,7 @@ test('explicit leading utilities are respected when overriding font-size', async
         --text-sm--line-height: 16px;
         --text-xl: 20px;
         --text-xl--line-height: 24px;
-        --line-height-tight: 8px;
+        --leading-tight: 8px;
       }
     `,
   )
@@ -540,7 +540,7 @@ test('explicit leading utilities are overridden by line-height modifiers', async
         --text-sm--line-height: 16px;
         --text-xl: 20px;
         --text-xl--line-height: 24px;
-        --line-height-tight: 8px;
+        --leading-tight: 8px;
       }
     `,
   )

packages/tailwindcss/theme.css

@@ -405,13 +405,13 @@
   --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;
 
-  /* Line-height */
-  --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
+  /* Leading */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
 
   /* 3D perspectives */
   --perspective-dramatic: 100px;