Use a default line height

tailwindlabs · Sep 24, 2024 · afdf457 · afdf457
1 parent a270e2c
commit afdf457
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 48 deletions.
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -11,6 +11,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --default-mono-font-family: var(--font-family-mono);
     --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
     --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+    --default-line-height: round(max(min(2em - .5rem, 1em + .5rem, 2em / 3 + 1rem), 1em), 2px);
     --breakpoint-sm: 40rem;
     --breakpoint-md: 48rem;
     --breakpoint-lg: 64rem;
@@ -350,31 +351,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --font-size-xs: .75rem;
-    --font-size-xs--line-height: 1rem;
     --font-size-sm: .875rem;
-    --font-size-sm--line-height: 1.25rem;
     --font-size-base: 1rem;
-    --font-size-base--line-height: 1.5rem;
     --font-size-lg: 1.125rem;
-    --font-size-lg--line-height: 1.75rem;
     --font-size-xl: 1.25rem;
-    --font-size-xl--line-height: 1.75rem;
     --font-size-2xl: 1.5rem;
-    --font-size-2xl--line-height: 2rem;
     --font-size-3xl: 1.875rem;
-    --font-size-3xl--line-height: 2.25rem;
     --font-size-4xl: 2.25rem;
-    --font-size-4xl--line-height: 2.5rem;
     --font-size-5xl: 3rem;
-    --font-size-5xl--line-height: 1;
     --font-size-6xl: 3.75rem;
-    --font-size-6xl--line-height: 1;
     --font-size-7xl: 4.5rem;
-    --font-size-7xl--line-height: 1;
     --font-size-8xl: 6rem;
-    --font-size-8xl--line-height: 1;
     --font-size-9xl: 8rem;
-    --font-size-9xl--line-height: 1;
     --letter-spacing-tighter: -.05em;
     --letter-spacing-tight: -.025em;
     --letter-spacing-normal: 0em;
@@ -472,6 +460,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   small {
     font-size: 80%;
+    line-height: var(--default-line-height, 1.5);
   }
 
   sub, sup {
@@ -586,7 +575,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 @layer utilities {
   .text-2xl {
     font-size: var(--font-size-2xl, 1.5rem);
-    line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem));
+    line-height: var(--tw-leading, var(--default-line-height));
   }
 
   .text-black\\/50 {

diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
@@ -140,6 +140,7 @@ pre {
 
 small {
   font-size: 80%;
+  line-height: var(--default-line-height, 1.5);
 }
 
 /*

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -10,6 +10,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --default-mono-font-family: var(--font-family-mono);
   --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
   --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+  --default-line-height: round(max(min(2em - .5rem, 1em + .5rem, 2em / 3 + 1rem), 1em), 2px);
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
@@ -349,31 +350,18 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-size-xs: .75rem;
-  --font-size-xs--line-height: 1rem;
   --font-size-sm: .875rem;
-  --font-size-sm--line-height: 1.25rem;
   --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
   --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
   --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
   --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
   --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
   --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
   --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
   --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
   --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
   --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
   --letter-spacing-tighter: -.05em;
   --letter-spacing-tight: -.025em;
   --letter-spacing-normal: 0em;

diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -905,6 +905,7 @@ describe('Parsing themes values from CSS', () => {
 
       .text-lg {
         font-size: var(--font-size-lg, 20px);
+        line-height: var(--tw-leading, var(--default-line-height));
       }
 
       .accent-red {
@@ -948,6 +949,7 @@ describe('Parsing themes values from CSS', () => {
 
       .text-sm {
         font-size: var(--font-size-sm, 13px);
+        line-height: var(--tw-leading, var(--default-line-height));
       }
 
       .accent-green {

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -14122,34 +14122,42 @@ test('text', async () => {
 
     .text-\\[12px\\] {
       font-size: 12px;
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[50\\%\\] {
       font-size: 50%;
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[absolute-size\\:var\\(--my-size\\)\\] {
       font-size: var(--my-size);
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] {
       font-size: 2rem;
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] {
       font-size: clamp(1rem, var(--size), 3rem);
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[larger\\] {
       font-size: larger;
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] {
       font-size: var(--my-size);
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[xx-large\\] {
       font-size: xx-large;
+      line-height: var(--tw-leading, var(--default-line-height));
     }
 
     .text-\\[\\#0088cc\\] {

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -4183,12 +4183,16 @@ export function createUtilities(theme: Theme) {
                 ? candidate.modifier.value
                 : theme.resolve(candidate.modifier.value, ['--line-height'])
 
-            if (modifier) {
-              return [decl('font-size', value), decl('line-height', modifier)]
-            }
+            return [
+              decl('font-size', value),
+              decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
+            ]
           }
 
-          return [decl('font-size', value)]
+          return [
+            decl('font-size', value),
+            decl('line-height', 'var(--tw-leading, var(--default-line-height))'),
+          ]
         }
         default: {
           value = asColor(value, candidate.modifier)
@@ -4223,9 +4227,10 @@ export function createUtilities(theme: Theme) {
               ? candidate.modifier.value
               : theme.resolve(candidate.modifier.value, ['--line-height'])
 
-          let declarations = [decl('font-size', fontSize)]
-          modifier && declarations.push(decl('line-height', modifier))
-          return declarations
+          return [
+            decl('font-size', fontSize),
+            decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
+          ]
         }
 
         if (typeof options === 'string') {
@@ -4236,7 +4241,7 @@ export function createUtilities(theme: Theme) {
           decl('font-size', fontSize),
           decl(
             'line-height',
-            options['--line-height'] ? `var(--tw-leading, ${options['--line-height']})` : undefined,
+            `var(--tw-leading, ${options['--line-height'] ?? 'var(--default-line-height)'})`,
           ),
           decl(
             'letter-spacing',

diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
@@ -8,6 +8,7 @@
   --default-mono-font-family: var(--font-family-mono);
   --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
   --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+  --default-line-height: round(max(min(2em - 0.5rem, 1em + 0.5rem, 2em / 3 + 1rem), 1em), 2px);
 
   /* Breakpoints */
   --breakpoint-sm: 40rem;
@@ -373,31 +374,18 @@
 
   /* Type scale */
   --font-size-xs: 0.75rem;
-  --font-size-xs--line-height: 1rem;
   --font-size-sm: 0.875rem;
-  --font-size-sm--line-height: 1.25rem;
   --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
   --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
   --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
   --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
   --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
   --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
   --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
   --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
   --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
   --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
 
   /* Letter spacing */
   --letter-spacing-tighter: -0.05em;