Skip to content

Commit bd24736

Browse files
MartijnCuppensMartijnCuppens
committed
Use a default line height
1 parent 95c4877 commit bd24736

File tree

7 files changed

+29
-48
lines changed

7 files changed

+29
-48
lines changed

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
1111
--default-mono-font-family: var(--font-mono);
1212
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
1313
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
14+
--default-line-height: round(max(min(2em - .5rem, 1em + .5rem, 2em / 3 + 1rem), 1em), 2px);
1415
--breakpoint-sm: 40rem;
1516
--breakpoint-md: 48rem;
1617
--breakpoint-lg: 64rem;
@@ -315,31 +316,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
315316
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
316317
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
317318
--text-xs: .75rem;
318-
--text-xs--line-height: 1rem;
319319
--text-sm: .875rem;
320-
--text-sm--line-height: 1.25rem;
321320
--text-base: 1rem;
322-
--text-base--line-height: 1.5rem;
323321
--text-lg: 1.125rem;
324-
--text-lg--line-height: 1.75rem;
325322
--text-xl: 1.25rem;
326-
--text-xl--line-height: 1.75rem;
327323
--text-2xl: 1.5rem;
328-
--text-2xl--line-height: 2rem;
329324
--text-3xl: 1.875rem;
330-
--text-3xl--line-height: 2.25rem;
331325
--text-4xl: 2.25rem;
332-
--text-4xl--line-height: 2.5rem;
333326
--text-5xl: 3rem;
334-
--text-5xl--line-height: 1;
335327
--text-6xl: 3.75rem;
336-
--text-6xl--line-height: 1;
337328
--text-7xl: 4.5rem;
338-
--text-7xl--line-height: 1;
339329
--text-8xl: 6rem;
340-
--text-8xl--line-height: 1;
341330
--text-9xl: 8rem;
342-
--text-9xl--line-height: 1;
343331
--font-weight-thin: 100;
344332
--font-weight-extralight: 200;
345333
--font-weight-light: 300;
@@ -438,6 +426,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
438426
439427
small {
440428
font-size: 80%;
429+
line-height: var(--default-line-height, 1.5);
441430
}
442431
443432
sub, sup {
@@ -552,7 +541,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
552541
@layer utilities {
553542
.text-2xl {
554543
font-size: var(--text-2xl);
555-
line-height: var(--tw-leading, var(--text-2xl--line-height));
544+
line-height: var(--tw-leading, var(--default-line-height));
556545
}
557546
558547
.text-black\\/50 {

‎packages/tailwindcss/preflight.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ pre {
140140

141141
small {
142142
font-size: 80%;
143+
line-height: var(--default-line-height, 1.5);
143144
}
144145

145146
/*

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

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
1010
--default-mono-font-family: var(--font-mono);
1111
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
1212
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
13+
--default-line-height: round(max(min(2em - .5rem, 1em + .5rem, 2em / 3 + 1rem), 1em), 2px);
1314
--breakpoint-sm: 40rem;
1415
--breakpoint-md: 48rem;
1516
--breakpoint-lg: 64rem;
@@ -314,31 +315,18 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
314315
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
315316
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
316317
--text-xs: .75rem;
317-
--text-xs--line-height: 1rem;
318318
--text-sm: .875rem;
319-
--text-sm--line-height: 1.25rem;
320319
--text-base: 1rem;
321-
--text-base--line-height: 1.5rem;
322320
--text-lg: 1.125rem;
323-
--text-lg--line-height: 1.75rem;
324321
--text-xl: 1.25rem;
325-
--text-xl--line-height: 1.75rem;
326322
--text-2xl: 1.5rem;
327-
--text-2xl--line-height: 2rem;
328323
--text-3xl: 1.875rem;
329-
--text-3xl--line-height: 2.25rem;
330324
--text-4xl: 2.25rem;
331-
--text-4xl--line-height: 2.5rem;
332325
--text-5xl: 3rem;
333-
--text-5xl--line-height: 1;
334326
--text-6xl: 3.75rem;
335-
--text-6xl--line-height: 1;
336327
--text-7xl: 4.5rem;
337-
--text-7xl--line-height: 1;
338328
--text-8xl: 6rem;
339-
--text-8xl--line-height: 1;
340329
--text-9xl: 8rem;
341-
--text-9xl--line-height: 1;
342330
--font-weight-thin: 100;
343331
--font-weight-extralight: 200;
344332
--font-weight-light: 300;

‎packages/tailwindcss/src/index.test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1082,6 +1082,7 @@ describe('Parsing themes values from CSS', () => {
10821082
10831083
.text-lg {
10841084
font-size: var(--text-lg);
1085+
line-height: var(--tw-leading, var(--default-line-height));
10851086
}
10861087
10871088
.accent-red {
@@ -1135,6 +1136,7 @@ describe('Parsing themes values from CSS', () => {
11351136
11361137
.text-sm {
11371138
font-size: var(--text-sm);
1139+
line-height: var(--tw-leading, var(--default-line-height));
11381140
}
11391141
11401142
.accent-green {

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14765,34 +14765,42 @@ test('text', async () => {
1476514765
1476614766
.text-\\[12px\\] {
1476714767
font-size: 12px;
14768+
line-height: var(--tw-leading, var(--default-line-height));
1476814769
}
1476914770
1477014771
.text-\\[50\\%\\] {
1477114772
font-size: 50%;
14773+
line-height: var(--tw-leading, var(--default-line-height));
1477214774
}
1477314775
1477414776
.text-\\[absolute-size\\:var\\(--my-size\\)\\] {
1477514777
font-size: var(--my-size);
14778+
line-height: var(--tw-leading, var(--default-line-height));
1477614779
}
1477714780
1477814781
.text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] {
1477914782
font-size: 2rem;
14783+
line-height: var(--tw-leading, var(--default-line-height));
1478014784
}
1478114785
1478214786
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] {
1478314787
font-size: clamp(1rem, var(--size), 3rem);
14788+
line-height: var(--tw-leading, var(--default-line-height));
1478414789
}
1478514790
1478614791
.text-\\[larger\\] {
1478714792
font-size: larger;
14793+
line-height: var(--tw-leading, var(--default-line-height));
1478814794
}
1478914795
1479014796
.text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] {
1479114797
font-size: var(--my-size);
14798+
line-height: var(--tw-leading, var(--default-line-height));
1479214799
}
1479314800
1479414801
.text-\\[xx-large\\] {
1479514802
font-size: xx-large;
14803+
line-height: var(--tw-leading, var(--default-line-height));
1479614804
}
1479714805
1479814806
.text-\\[\\#0088cc\\] {

‎packages/tailwindcss/src/utilities.ts

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3885,12 +3885,16 @@ export function createUtilities(theme: Theme) {
38853885
? candidate.modifier.value
38863886
: theme.resolve(candidate.modifier.value, ['--line-height'])
38873887

3888-
if (modifier) {
3889-
return [decl('font-size', value), decl('line-height', modifier)]
3890-
}
3888+
return [
3889+
decl('font-size', value),
3890+
decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
3891+
]
38913892
}
38923893

3893-
return [decl('font-size', value)]
3894+
return [
3895+
decl('font-size', value),
3896+
decl('line-height', 'var(--tw-leading, var(--default-line-height))'),
3897+
]
38943898
}
38953899
default: {
38963900
value = asColor(value, candidate.modifier)
@@ -3925,9 +3929,10 @@ export function createUtilities(theme: Theme) {
39253929
? candidate.modifier.value
39263930
: theme.resolve(candidate.modifier.value, ['--line-height'])
39273931

3928-
let declarations = [decl('font-size', fontSize)]
3929-
modifier && declarations.push(decl('line-height', modifier))
3930-
return declarations
3932+
return [
3933+
decl('font-size', fontSize),
3934+
decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
3935+
]
39313936
}
39323937

39333938
if (typeof options === 'string') {
@@ -3938,7 +3943,7 @@ export function createUtilities(theme: Theme) {
39383943
decl('font-size', fontSize),
39393944
decl(
39403945
'line-height',
3941-
options['--line-height'] ? `var(--tw-leading, ${options['--line-height']})` : undefined,
3946+
`var(--tw-leading, ${options['--line-height'] ?? 'var(--default-line-height)'})`,
39423947
),
39433948
decl(
39443949
'letter-spacing',

‎packages/tailwindcss/theme.css

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
--default-mono-font-family: var(--font-mono);
99
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
1010
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
11+
--default-line-height: round(max(min(2em - 0.5rem, 1em + 0.5rem, 2em / 3 + 1rem), 1em), 2px);
1112

1213
/* Breakpoints */
1314
--breakpoint-sm: 40rem;
@@ -360,31 +361,18 @@
360361

361362
/* Type scale */
362363
--text-xs: 0.75rem;
363-
--text-xs--line-height: 1rem;
364364
--text-sm: 0.875rem;
365-
--text-sm--line-height: 1.25rem;
366365
--text-base: 1rem;
367-
--text-base--line-height: 1.5rem;
368366
--text-lg: 1.125rem;
369-
--text-lg--line-height: 1.75rem;
370367
--text-xl: 1.25rem;
371-
--text-xl--line-height: 1.75rem;
372368
--text-2xl: 1.5rem;
373-
--text-2xl--line-height: 2rem;
374369
--text-3xl: 1.875rem;
375-
--text-3xl--line-height: 2.25rem;
376370
--text-4xl: 2.25rem;
377-
--text-4xl--line-height: 2.5rem;
378371
--text-5xl: 3rem;
379-
--text-5xl--line-height: 1;
380372
--text-6xl: 3.75rem;
381-
--text-6xl--line-height: 1;
382373
--text-7xl: 4.5rem;
383-
--text-7xl--line-height: 1;
384374
--text-8xl: 6rem;
385-
--text-8xl--line-height: 1;
386375
--text-9xl: 8rem;
387-
--text-9xl--line-height: 1;
388376

389377
/* Font weights */
390378
--font-weight-thin: 100;

0 commit comments

Comments
 (0)