diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index ee626aeea51e..939cecb13527 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -350,31 +350,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; @@ -382,11 +369,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --letter-spacing-wider: .05em; --letter-spacing-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; + --line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); --line-height-3: .75rem; --line-height-4: 1rem; --line-height-5: 1.25rem; @@ -423,9 +410,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` } html, :host { + line-height: var(--line-height-normal, 1.5); -webkit-text-size-adjust: 100%; tab-size: 4; - line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); @@ -472,6 +459,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` small { font-size: 80%; + line-height: var(--tw-line-height, var(--line-height-normal, 1.5)); } sub, sup { @@ -586,7 +574,6 @@ 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(--font-size-2xl--line-height, 2rem); } .text-black\\/50 { diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index bf664fc2be89..d543aa5d0271 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -27,7 +27,7 @@ html, :host { - line-height: 1.5; /* 1 */ + line-height: var(--line-height-normal, 1.5); /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: var( @@ -140,6 +140,7 @@ pre { small { font-size: 80%; + line-height: var(--tw-line-height, var(--line-height-normal, 1.5)); } /* diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index d16657b1b7aa..90ebdc52f2bf 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -349,31 +349,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; @@ -381,11 +368,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --letter-spacing-wider: .05em; --letter-spacing-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; + --line-height-tight: max(1em, 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-snug: max(1em, 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-normal: max(1em, 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-relaxed: max(1em, 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); + --line-height-loose: max(1em, 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3))); --line-height-3: .75rem; --line-height-4: 1rem; --line-height-5: 1.25rem; diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 4e272d029207..68c99238e181 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -13067,15 +13067,18 @@ test('leading', async () => { } .leading-6 { - line-height: var(--line-height-6, 1.5rem); + --tw-line-height: var(--line-height-6, 1.5rem); + line-height: var(--tw-line-height); } .leading-\\[--value\\] { - line-height: var(--value); + --tw-line-height: var(--value); + line-height: var(--tw-line-height); } .leading-none { - line-height: var(--line-height-none, 1); + --tw-line-height: var(--line-height-none, 1); + line-height: var(--tw-line-height); }" `) expect( @@ -13700,71 +13703,79 @@ test('text', async () => { line-height: var(--font-size-sm--line-height, 1.25rem); } - .text-\\[12px\\]\\/6 { + .text-\\[12px\\] { font-size: 12px; - line-height: var(--line-height-6, 1.5rem); - } - - .text-\\[50\\%\\]\\/6 { - font-size: 50%; - line-height: var(--line-height-6, 1.5rem); - } - - .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { - font-size: clamp(1rem, var(--size), 3rem); - line-height: var(--line-height-9, 2.25rem); + line-height: var(--tw-line-height, var(--line-height-normal)); } - .text-\\[larger\\]\\/6 { - font-size: larger; - line-height: var(--line-height-6, 1.5rem); - } - - .text-\\[xx-large\\]\\/6 { - font-size: xx-large; - line-height: var(--line-height-6, 1.5rem); - } - - .text-sm\\/6 { - font-size: var(--font-size-sm, .875rem); - line-height: var(--line-height-6, 1.5rem); - } - - .text-sm\\/\\[4px\\] { - font-size: var(--font-size-sm, .875rem); - line-height: 4px; - } - - .text-\\[12px\\] { + .text-\\[12px\\]\\/6 { font-size: 12px; + line-height: var(--tw-line-height, var(--line-height-6, 1.5rem)); } .text-\\[50\\%\\] { font-size: 50%; + line-height: var(--tw-line-height, var(--line-height-normal)); + } + + .text-\\[50\\%\\]\\/6 { + font-size: 50%; + line-height: var(--tw-line-height, var(--line-height-6, 1.5rem)); } .text-\\[absolute-size\\:--my-size\\] { font-size: var(--my-size); + line-height: var(--tw-line-height, var(--line-height-normal)); } .text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] { font-size: 2rem; + line-height: var(--tw-line-height, var(--line-height-normal)); } .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] { font-size: clamp(1rem, var(--size), 3rem); + line-height: var(--tw-line-height, var(--line-height-normal)); + } + + .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { + font-size: clamp(1rem, var(--size), 3rem); + line-height: var(--tw-line-height, var(--line-height-9, 2.25rem)); } .text-\\[larger\\] { font-size: larger; + line-height: var(--tw-line-height, var(--line-height-normal)); + } + + .text-\\[larger\\]\\/6 { + font-size: larger; + line-height: var(--tw-line-height, var(--line-height-6, 1.5rem)); } .text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] { font-size: var(--my-size); + line-height: var(--tw-line-height, var(--line-height-normal)); } .text-\\[xx-large\\] { font-size: xx-large; + line-height: var(--tw-line-height, var(--line-height-normal)); + } + + .text-\\[xx-large\\]\\/6 { + font-size: xx-large; + line-height: var(--tw-line-height, var(--line-height-6, 1.5rem)); + } + + .text-sm\\/6 { + font-size: var(--font-size-sm, .875rem); + line-height: var(--line-height-6, 1.5rem); + } + + .text-sm\\/\\[4px\\] { + font-size: var(--font-size-sm, .875rem); + line-height: 4px; } .text-\\[\\#0088cc\\] { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index dfb40ea10aa9..6eedcffa5f19 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3782,7 +3782,10 @@ export function createUtilities(theme: Theme) { functionalUtility('leading', { themeKeys: ['--line-height'], - handle: (value) => [decl('line-height', value)], + handle: (value) => [ + decl('--tw-line-height', value), + decl('line-height', 'var(--tw-line-height)'), + ], }) functionalUtility('tracking', { @@ -4050,11 +4053,17 @@ export function createUtilities(theme: Theme) { : 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', `var(--tw-line-height, ${modifier})`), + ] } } - return [decl('font-size', value)] + return [ + decl('font-size', value), + decl('line-height', 'var(--tw-line-height, var(--line-height-normal))'), + ] } default: { value = asColor(value, candidate.modifier) diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 190e51f09b91..7a960e3c612d 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -373,31 +373,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; @@ -409,11 +396,26 @@ /* 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; + --line-height-tight: max( + 1em, + 1.25 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)) + ); + --line-height-snug: max( + 1em, + 1.375 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)) + ); + --line-height-normal: max( + 1em, + 1.5 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)) + ); + --line-height-relaxed: max( + 1em, + 1.625 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)) + ); + --line-height-loose: max( + 1em, + 2 * min(4em / 9 + 2rem / 3, min((2em + 1rem) / 3, (4em - 1rem) / 3)) + ); --line-height-3: 0.75rem; --line-height-4: 1rem; --line-height-5: 1.25rem;