diff --git a/CHANGELOG.md b/CHANGELOG.md index dd171daf65c6..b0022e368ecc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don't reset horizontal padding on date/time pseudo-elements ([#14959](https://github.com/tailwindlabs/tailwindcss/pull/14959)) - Don't emit `calc()` with invalid values for bare values that aren't integers in spacing utilities ([#14962](https://github.com/tailwindlabs/tailwindcss/pull/14962)) +- Ensure spacing scale values work as line-height modifiers ([#14966](https://github.com/tailwindlabs/tailwindcss/pull/14966)) ## [4.0.0-alpha.32] - 2024-11-11 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 3335e4168eb0..b40f08782ee7 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14811,11 +14811,10 @@ test('text', async () => { await compileCss( css` @theme { + --spacing: 0.25rem; --color-red-500: #ef4444; - --leading-6: 1.5rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; - --leading-9: 2.25rem; } @tailwind utilities; `, @@ -14868,11 +14867,10 @@ test('text', async () => { ), ).toMatchInlineSnapshot(` ":root { + --spacing: .25rem; --color-red-500: #ef4444; - --leading-6: 1.5rem; --text-sm: .875rem; --text-sm--line-height: 1.25rem; - --leading-9: 2.25rem; } .text-sm { @@ -14882,32 +14880,32 @@ test('text', async () => { .text-\\[12px\\]\\/6 { font-size: 12px; - line-height: var(--leading-6); + line-height: calc(var(--spacing) * 6); } .text-\\[50\\%\\]\\/6 { font-size: 50%; - line-height: var(--leading-6); + line-height: calc(var(--spacing) * 6); } .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 { font-size: clamp(1rem, var(--size), 3rem); - line-height: var(--leading-9); + line-height: calc(var(--spacing) * 9); } .text-\\[larger\\]\\/6 { font-size: larger; - line-height: var(--leading-6); + line-height: calc(var(--spacing) * 6); } .text-\\[xx-large\\]\\/6 { font-size: xx-large; - line-height: var(--leading-6); + line-height: calc(var(--spacing) * 6); } .text-sm\\/6 { font-size: var(--text-sm); - line-height: var(--leading-6); + line-height: calc(var(--spacing) * 6); } .text-sm\\/\\[4px\\] { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a20938550ac0..c554a9cc5a41 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3902,6 +3902,12 @@ export function createUtilities(theme: Theme) { ? candidate.modifier.value : theme.resolve(candidate.modifier.value, ['--leading']) + if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) { + let multiplier = theme.resolve(null, ['--spacing']) + if (!multiplier) return null + modifier = `calc(${multiplier} * ${candidate.modifier.value})` + } + if (modifier) { return [decl('font-size', value), decl('line-height', modifier)] } @@ -3942,6 +3948,12 @@ export function createUtilities(theme: Theme) { ? candidate.modifier.value : theme.resolve(candidate.modifier.value, ['--leading']) + if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) { + let multiplier = theme.resolve(null, ['--spacing']) + if (!multiplier) return null + modifier = `calc(${multiplier} * ${candidate.modifier.value})` + } + let declarations = [decl('font-size', fontSize)] modifier && declarations.push(decl('line-height', modifier)) return declarations