Make leading-none a static utility (#14934)

This PR removes the `--leading-none` variable from the default theme in
favor of making `leading-none` a static utility, since it doesn't make
sense to change the value of this on a per-project basis. This is
consistent with how `none` values work for other utilities in the
framework.

Some folks in the past have wanted `leading-none` to be `line-height: 0`
but technically "leading" is the space between lines, and `line-height:
1` removes all extra space between lines so it feels correct to me
(although it means all of the numeric utilities like `leading-6` are not
technically correct but I try hard not to think about that too much).

If someone wants `line-height: 0` they can use `leading-0` in v4 since
the `leading-*` utilities inherit the spacing scale now.

---------

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

Author: adamwathan

CHANGELOG.md

@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926))
 - Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929))
 - Deprecate `shadow-inner` utility ([#14933](https://github.com/tailwindlabs/tailwindcss/pull/14933))
+- Remove `--leading-none` from the default theme in favor of a static `leading-none` utility ([#14934](https://github.com/tailwindlabs/tailwindcss/pull/14934))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

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

@@ -354,7 +354,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --tracking-widest: .1em;
-    --leading-none: 1;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-normal: 1.5;

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

@@ -353,7 +353,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --tracking-wide: .025em;
   --tracking-wider: .05em;
   --tracking-widest: .1em;
-  --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;

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

@@ -3853,6 +3853,7 @@ exports[`getClassList 1`] = `
   "leading-80",
   "leading-9",
   "leading-96",
+  "leading-none",
   "leading-px",
   "left-0",
   "left-0.5",

packages/tailwindcss/src/utilities.test.ts

@@ -14036,16 +14036,16 @@ test('leading', async () => {
     await compileCss(
       css`
         @theme {
-          --leading-none: 1;
+          --leading-tight: 1.25;
           --leading-6: 1.5rem;
         }
         @tailwind utilities;
       `,
-      ['leading-none', 'leading-6', 'leading-[var(--value)]'],
+      ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --leading-none: 1;
+      --leading-tight: 1.25;
       --leading-6: 1.5rem;
     }
 
@@ -14059,9 +14059,9 @@ test('leading', async () => {
       line-height: var(--value);
     }
 
-    .leading-none {
-      --tw-leading: var(--leading-none);
-      line-height: var(--leading-none);
+    .leading-tight {
+      --tw-leading: var(--leading-tight);
+      line-height: var(--leading-tight);
     }
 
     @supports (-moz-orient: inline) {
@@ -14080,10 +14080,10 @@ test('leading', async () => {
   expect(
     await run([
       'leading',
-      '-leading-none',
+      '-leading-tight',
       '-leading-6',
       '-leading-[var(--value)]',
-      'leading-none/foo',
+      'leading-tight/foo',
       'leading-6/foo',
       'leading-[var(--value)]/foo',
     ]),

packages/tailwindcss/src/utilities.ts

@@ -3609,6 +3609,11 @@ export function createUtilities(theme: Theme) {
   staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']])
   staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']])
 
+  staticUtility('leading-none', [
+    () => atRoot([property('--tw-leading')]),
+    ['--tw-leading', '1'],
+    ['line-height', '1'],
+  ])
   spacingUtility('leading', ['--leading'], (value) => [
     atRoot([property('--tw-leading')]),
     decl('--tw-leading', value),

packages/tailwindcss/theme.css

@@ -405,7 +405,6 @@
   --tracking-widest: 0.1em;
 
   /* Leading */
-  --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;