diff --git a/CHANGELOG.md b/CHANGELOG.md
index e913c18695e4..3342d92c9f9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
- Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
+- Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
## [4.0.0-alpha.31] - 2024-10-29
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index 889c13cc9104..2681e890f877 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -117,6 +117,9 @@ test(
letterSpacing: {
superWide: '0.25em',
},
+ lineHeight: {
+ superLoose: '3',
+ },
},
},
plugins: [],
@@ -135,7 +138,7 @@ test(
`,
'src/index.html': html`
`,
'node_modules/my-external-lib/src/template.html': html`
@@ -152,7 +155,7 @@ test(
"
--- src/index.html ---
--- src/input.css ---
@@ -238,6 +241,8 @@ test(
--tracking-super-wide: 0.25em;
+ --leading-super-loose: 3;
+
@keyframes spin-clockwise {
0% {
transform: rotate(0deg);
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index b3ae33f3552b..5605db731ad4 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -355,12 +355,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-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;
+ --leading-none: 1;
+ --leading-tight: 1.25;
+ --leading-snug: 1.375;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.625;
+ --leading-loose: 2;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 7426fef22528..980e7d6dfdf3 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -354,12 +354,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-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;
+ --leading-none: 1;
+ --leading-tight: 1.25;
+ --leading-snug: 1.375;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.625;
+ --leading-loose: 2;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
index 1d16ed8108ae..12764c740546 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -54,6 +54,10 @@ test('config values can be merged into the theme', () => {
superWide: '0.25em',
},
+ lineHeight: {
+ superLoose: '3',
+ },
+
width: {
// Purposely setting to something different from the default
'1/2': '60%',
@@ -93,6 +97,7 @@ test('config values can be merged into the theme', () => {
{ '--line-height': '1.5' },
])
expect(theme.resolve('super-wide', ['--tracking'])).toEqual('0.25em')
+ expect(theme.resolve('super-loose', ['--leading'])).toEqual('3')
expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
expect(theme.resolve('100%', ['--width'])).toEqual('100%')
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
index a5940cb3982d..a5f3e0470e78 100644
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -137,6 +137,7 @@ export function keyPathToCssProperty(path: string[]) {
if (path[0] === 'fontFamily') path[0] = 'font'
if (path[0] === 'fontSize') path[0] = 'text'
if (path[0] === 'letterSpacing') path[0] = 'tracking'
+ if (path[0] === 'lineHeight') path[0] = 'leading'
if (path[0] === 'maxWidth') path[0] = 'container'
if (path[0] === 'screens') path[0] = 'breakpoint'
if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 6b2e89ccff48..b99bc405bc75 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -1539,6 +1539,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
--tracking-a: 1;
--tracking-b: 2;
+
+ --leading-a: 1;
+ --leading-b: 2;
}
@plugin "./plugin.js";
@@ -1605,6 +1608,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
a: '1',
b: '2',
})
+
+ expect(theme('lineHeight.a')).toEqual('1')
+ expect(theme('lineHeight.b')).toEqual('2')
+
+ expect(theme('lineHeight')).toMatchObject({
+ a: '1',
+ b: '2',
+ })
}),
}
},
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts
index 33fcc45bab61..6dd198afc9a3 100644
--- a/packages/tailwindcss/src/compat/config/create-compat-config.ts
+++ b/packages/tailwindcss/src/compat/config/create-compat-config.ts
@@ -38,6 +38,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
...theme('tracking', {}),
}),
+ lineHeight: ({ theme }) => ({
+ ...theme('leading', {}),
+ }),
+
transitionDuration: {
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
},
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index d4bf15fd7619..990a8b989da2 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -640,6 +640,7 @@ describe('theme function', () => {
['maxWidth.xs', '20rem'],
['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
['letterSpacing.wide', '.025em'],
+ ['lineHeight.tight', '1.25'],
['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
])('theme(%s) → %s', async (value, result) => {
let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index bc7dcaf474c5..6cae143be9c4 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -14036,8 +14036,8 @@ test('leading', async () => {
await compileCss(
css`
@theme {
- --line-height-none: 1;
- --line-height-6: 1.5rem;
+ --leading-none: 1;
+ --leading-6: 1.5rem;
}
@tailwind utilities;
`,
@@ -14045,13 +14045,13 @@ test('leading', async () => {
),
).toMatchInlineSnapshot(`
":root {
- --line-height-none: 1;
- --line-height-6: 1.5rem;
+ --leading-none: 1;
+ --leading-6: 1.5rem;
}
.leading-6 {
- --tw-leading: var(--line-height-6);
- line-height: var(--line-height-6);
+ --tw-leading: var(--leading-6);
+ line-height: var(--leading-6);
}
.leading-\\[var\\(--value\\)\\] {
@@ -14060,8 +14060,8 @@ test('leading', async () => {
}
.leading-none {
- --tw-leading: var(--line-height-none);
- line-height: var(--line-height-none);
+ --tw-leading: var(--leading-none);
+ line-height: var(--leading-none);
}
@supports (-moz-orient: inline) {
@@ -14660,10 +14660,10 @@ test('text', async () => {
css`
@theme {
--color-red-500: #ef4444;
- --line-height-6: 1.5rem;
+ --leading-6: 1.5rem;
--text-sm: 0.875rem;
--text-sm--line-height: 1.25rem;
- --line-height-9: 2.25rem;
+ --leading-9: 2.25rem;
}
@tailwind utilities;
`,
@@ -14717,10 +14717,10 @@ test('text', async () => {
).toMatchInlineSnapshot(`
":root {
--color-red-500: #ef4444;
- --line-height-6: 1.5rem;
+ --leading-6: 1.5rem;
--text-sm: .875rem;
--text-sm--line-height: 1.25rem;
- --line-height-9: 2.25rem;
+ --leading-9: 2.25rem;
}
.text-sm {
@@ -14730,32 +14730,32 @@ test('text', async () => {
.text-\\[12px\\]\\/6 {
font-size: 12px;
- line-height: var(--line-height-6);
+ line-height: var(--leading-6);
}
.text-\\[50\\%\\]\\/6 {
font-size: 50%;
- line-height: var(--line-height-6);
+ line-height: var(--leading-6);
}
.text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
font-size: clamp(1rem, var(--size), 3rem);
- line-height: var(--line-height-9);
+ line-height: var(--leading-9);
}
.text-\\[larger\\]\\/6 {
font-size: larger;
- line-height: var(--line-height-6);
+ line-height: var(--leading-6);
}
.text-\\[xx-large\\]\\/6 {
font-size: xx-large;
- line-height: var(--line-height-6);
+ line-height: var(--leading-6);
}
.text-sm\\/6 {
font-size: var(--text-sm);
- line-height: var(--line-height-6);
+ line-height: var(--leading-6);
}
.text-sm\\/\\[4px\\] {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 671719d96e39..eac2983aeba5 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3609,7 +3609,7 @@ export function createUtilities(theme: Theme) {
staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']])
staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']])
- spacingUtility('leading', ['--line-height'], (value) => [
+ spacingUtility('leading', ['--leading'], (value) => [
atRoot([property('--tw-leading')]),
decl('--tw-leading', value),
decl('line-height', value),
@@ -3880,7 +3880,7 @@ export function createUtilities(theme: Theme) {
let modifier =
candidate.modifier.kind === 'arbitrary'
? candidate.modifier.value
- : theme.resolve(candidate.modifier.value, ['--line-height'])
+ : theme.resolve(candidate.modifier.value, ['--leading'])
if (modifier) {
return [decl('font-size', value), decl('line-height', modifier)]
@@ -3920,7 +3920,7 @@ export function createUtilities(theme: Theme) {
let modifier =
candidate.modifier.kind === 'arbitrary'
? candidate.modifier.value
- : theme.resolve(candidate.modifier.value, ['--line-height'])
+ : theme.resolve(candidate.modifier.value, ['--leading'])
let declarations = [decl('font-size', fontSize)]
modifier && declarations.push(decl('line-height', modifier))
@@ -3964,7 +3964,7 @@ export function createUtilities(theme: Theme) {
values: [],
valueThemeKeys: ['--text'],
modifiers: [],
- modifierThemeKeys: ['--line-height'],
+ modifierThemeKeys: ['--leading'],
},
])
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index b5ce446b2a8b..445246beac4e 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -508,7 +508,7 @@ test('explicit leading utilities are respected when overriding font-size', async
--text-sm--line-height: 16px;
--text-xl: 20px;
--text-xl--line-height: 24px;
- --line-height-tight: 8px;
+ --leading-tight: 8px;
}
`,
)
@@ -540,7 +540,7 @@ test('explicit leading utilities are overridden by line-height modifiers', async
--text-sm--line-height: 16px;
--text-xl: 20px;
--text-xl--line-height: 24px;
- --line-height-tight: 8px;
+ --leading-tight: 8px;
}
`,
)
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 32ccf854fbf6..712870ae537f 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -405,13 +405,13 @@
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
- /* 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;
+ /* Leading */
+ --leading-none: 1;
+ --leading-tight: 1.25;
+ --leading-snug: 1.375;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.625;
+ --leading-loose: 2;
/* 3D perspectives */
--perspective-dramatic: 100px;