Skip to content

Commit 2e6d769

Browse files
MartijnCuppensMartijnCuppens
committed
Use a default line height
1 parent 7979474 commit 2e6d769

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

+3-14
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-family-mono);
1212
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
1313
--default-mono-font-variation-settings: var(--font-family-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;
@@ -350,31 +351,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
350351
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
351352
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
352353
--font-size-xs: .75rem;
353-
--font-size-xs--line-height: 1rem;
354354
--font-size-sm: .875rem;
355-
--font-size-sm--line-height: 1.25rem;
356355
--font-size-base: 1rem;
357-
--font-size-base--line-height: 1.5rem;
358356
--font-size-lg: 1.125rem;
359-
--font-size-lg--line-height: 1.75rem;
360357
--font-size-xl: 1.25rem;
361-
--font-size-xl--line-height: 1.75rem;
362358
--font-size-2xl: 1.5rem;
363-
--font-size-2xl--line-height: 2rem;
364359
--font-size-3xl: 1.875rem;
365-
--font-size-3xl--line-height: 2.25rem;
366360
--font-size-4xl: 2.25rem;
367-
--font-size-4xl--line-height: 2.5rem;
368361
--font-size-5xl: 3rem;
369-
--font-size-5xl--line-height: 1;
370362
--font-size-6xl: 3.75rem;
371-
--font-size-6xl--line-height: 1;
372363
--font-size-7xl: 4.5rem;
373-
--font-size-7xl--line-height: 1;
374364
--font-size-8xl: 6rem;
375-
--font-size-8xl--line-height: 1;
376365
--font-size-9xl: 8rem;
377-
--font-size-9xl--line-height: 1;
378366
--letter-spacing-tighter: -.05em;
379367
--letter-spacing-tight: -.025em;
380368
--letter-spacing-normal: 0em;
@@ -472,6 +460,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
472460
473461
small {
474462
font-size: 80%;
463+
line-height: var(--default-line-height, 1.5);
475464
}
476465
477466
sub, sup {
@@ -586,7 +575,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
586575
@layer utilities {
587576
.text-2xl {
588577
font-size: var(--font-size-2xl, 1.5rem);
589-
line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem));
578+
line-height: var(--tw-leading, var(--default-line-height));
590579
}
591580
592581
.text-black\\/50 {

‎packages/tailwindcss/preflight.css

+1
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

+1-13
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-family-mono);
1111
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
1212
--default-mono-font-variation-settings: var(--font-family-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;
@@ -349,31 +350,18 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
349350
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
350351
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
351352
--font-size-xs: .75rem;
352-
--font-size-xs--line-height: 1rem;
353353
--font-size-sm: .875rem;
354-
--font-size-sm--line-height: 1.25rem;
355354
--font-size-base: 1rem;
356-
--font-size-base--line-height: 1.5rem;
357355
--font-size-lg: 1.125rem;
358-
--font-size-lg--line-height: 1.75rem;
359356
--font-size-xl: 1.25rem;
360-
--font-size-xl--line-height: 1.75rem;
361357
--font-size-2xl: 1.5rem;
362-
--font-size-2xl--line-height: 2rem;
363358
--font-size-3xl: 1.875rem;
364-
--font-size-3xl--line-height: 2.25rem;
365359
--font-size-4xl: 2.25rem;
366-
--font-size-4xl--line-height: 2.5rem;
367360
--font-size-5xl: 3rem;
368-
--font-size-5xl--line-height: 1;
369361
--font-size-6xl: 3.75rem;
370-
--font-size-6xl--line-height: 1;
371362
--font-size-7xl: 4.5rem;
372-
--font-size-7xl--line-height: 1;
373363
--font-size-8xl: 6rem;
374-
--font-size-8xl--line-height: 1;
375364
--font-size-9xl: 8rem;
376-
--font-size-9xl--line-height: 1;
377365
--letter-spacing-tighter: -.05em;
378366
--letter-spacing-tight: -.025em;
379367
--letter-spacing-normal: 0em;

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

+2
Original file line numberDiff line numberDiff line change
@@ -905,6 +905,7 @@ describe('Parsing themes values from CSS', () => {
905905
906906
.text-lg {
907907
font-size: var(--font-size-lg, 20px);
908+
line-height: var(--tw-leading, var(--default-line-height));
908909
}
909910
910911
.accent-red {
@@ -948,6 +949,7 @@ describe('Parsing themes values from CSS', () => {
948949
949950
.text-sm {
950951
font-size: var(--font-size-sm, 13px);
952+
line-height: var(--tw-leading, var(--default-line-height));
951953
}
952954
953955
.accent-green {

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

+8
Original file line numberDiff line numberDiff line change
@@ -14069,34 +14069,42 @@ test('text', async () => {
1406914069
1407014070
.text-\\[12px\\] {
1407114071
font-size: 12px;
14072+
line-height: var(--tw-leading, var(--default-line-height));
1407214073
}
1407314074
1407414075
.text-\\[50\\%\\] {
1407514076
font-size: 50%;
14077+
line-height: var(--tw-leading, var(--default-line-height));
1407614078
}
1407714079
1407814080
.text-\\[absolute-size\\:--my-size\\] {
1407914081
font-size: var(--my-size);
14082+
line-height: var(--tw-leading, var(--default-line-height));
1408014083
}
1408114084
1408214085
.text-\\[clamp\\(1rem\\,2rem\\,3rem\\)\\] {
1408314086
font-size: 2rem;
14087+
line-height: var(--tw-leading, var(--default-line-height));
1408414088
}
1408514089
1408614090
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\] {
1408714091
font-size: clamp(1rem, var(--size), 3rem);
14092+
line-height: var(--tw-leading, var(--default-line-height));
1408814093
}
1408914094
1409014095
.text-\\[larger\\] {
1409114096
font-size: larger;
14097+
line-height: var(--tw-leading, var(--default-line-height));
1409214098
}
1409314099
1409414100
.text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] {
1409514101
font-size: var(--my-size);
14102+
line-height: var(--tw-leading, var(--default-line-height));
1409614103
}
1409714104
1409814105
.text-\\[xx-large\\] {
1409914106
font-size: xx-large;
14107+
line-height: var(--tw-leading, var(--default-line-height));
1410014108
}
1410114109
1410214110
.text-\\[\\#0088cc\\] {

‎packages/tailwindcss/src/utilities.ts

+13-8
Original file line numberDiff line numberDiff line change
@@ -4183,12 +4183,16 @@ export function createUtilities(theme: Theme) {
41834183
? candidate.modifier.value
41844184
: theme.resolve(candidate.modifier.value, ['--line-height'])
41854185

4186-
if (modifier) {
4187-
return [decl('font-size', value), decl('line-height', modifier)]
4188-
}
4186+
return [
4187+
decl('font-size', value),
4188+
decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
4189+
]
41894190
}
41904191

4191-
return [decl('font-size', value)]
4192+
return [
4193+
decl('font-size', value),
4194+
decl('line-height', 'var(--tw-leading, var(--default-line-height))'),
4195+
]
41924196
}
41934197
default: {
41944198
value = asColor(value, candidate.modifier)
@@ -4223,9 +4227,10 @@ export function createUtilities(theme: Theme) {
42234227
? candidate.modifier.value
42244228
: theme.resolve(candidate.modifier.value, ['--line-height'])
42254229

4226-
let declarations = [decl('font-size', fontSize)]
4227-
modifier && declarations.push(decl('line-height', modifier))
4228-
return declarations
4230+
return [
4231+
decl('font-size', fontSize),
4232+
decl('line-height', modifier ?? 'var(--tw-leading, var(--default-line-height))'),
4233+
]
42294234
}
42304235

42314236
if (typeof options === 'string') {
@@ -4236,7 +4241,7 @@ export function createUtilities(theme: Theme) {
42364241
decl('font-size', fontSize),
42374242
decl(
42384243
'line-height',
4239-
options['--line-height'] ? `var(--tw-leading, ${options['--line-height']})` : undefined,
4244+
`var(--tw-leading, ${options['--line-height'] ?? 'var(--default-line-height)'})`,
42404245
),
42414246
decl(
42424247
'letter-spacing',

‎packages/tailwindcss/theme.css

+1-13
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
--default-mono-font-family: var(--font-family-mono);
99
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
1010
--default-mono-font-variation-settings: var(--font-family-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;
@@ -373,31 +374,18 @@
373374

374375
/* Type scale */
375376
--font-size-xs: 0.75rem;
376-
--font-size-xs--line-height: 1rem;
377377
--font-size-sm: 0.875rem;
378-
--font-size-sm--line-height: 1.25rem;
379378
--font-size-base: 1rem;
380-
--font-size-base--line-height: 1.5rem;
381379
--font-size-lg: 1.125rem;
382-
--font-size-lg--line-height: 1.75rem;
383380
--font-size-xl: 1.25rem;
384-
--font-size-xl--line-height: 1.75rem;
385381
--font-size-2xl: 1.5rem;
386-
--font-size-2xl--line-height: 2rem;
387382
--font-size-3xl: 1.875rem;
388-
--font-size-3xl--line-height: 2.25rem;
389383
--font-size-4xl: 2.25rem;
390-
--font-size-4xl--line-height: 2.5rem;
391384
--font-size-5xl: 3rem;
392-
--font-size-5xl--line-height: 1;
393385
--font-size-6xl: 3.75rem;
394-
--font-size-6xl--line-height: 1;
395386
--font-size-7xl: 4.5rem;
396-
--font-size-7xl--line-height: 1;
397387
--font-size-8xl: 6rem;
398-
--font-size-8xl--line-height: 1;
399388
--font-size-9xl: 8rem;
400-
--font-size-9xl--line-height: 1;
401389

402390
/* Letter spacing */
403391
--letter-spacing-tighter: -0.05em;

0 commit comments

Comments
 (0)