diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c86bbd08a00..f82411ac8b05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Remove invalid `min-w/h-none` utilities ([#15845](https://github.com/tailwindlabs/tailwindcss/pull/15845)) - Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738)) +- Ensure font-size utilities with `none` modifier have a line-height set e.g.: `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921)) +- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921)) ## [4.0.0] - 2025-01-21 @@ -330,7 +332,7 @@ For a deep-dive into everything that's new, [check out the announcement post](ht - Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) - Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849)) -- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) +- Remove fixed line-height theme values and derive `leading-*` utilities from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880)) - Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857)) - Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881)) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9ecf38882316..e235777b2c98 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14927,6 +14927,7 @@ test('text', async () => { --color-red-500: #ef4444; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; + --leading-snug: 1.375; } @tailwind utilities; `, @@ -14962,6 +14963,9 @@ test('text', async () => { // font-size / line-height / letter-spacing / font-weight 'text-sm', 'text-sm/6', + 'text-sm/none', + 'text-[10px]/none', + 'text-sm/snug', 'text-sm/[4px]', 'text-[12px]', 'text-[12px]/6', @@ -14986,6 +14990,7 @@ test('text', async () => { --color-red-500: #ef4444; --text-sm: .875rem; --text-sm--line-height: 1.25rem; + --leading-snug: 1.375; } .text-sm { @@ -14993,6 +14998,11 @@ test('text', async () => { line-height: var(--tw-leading, var(--text-sm--line-height)); } + .text-\\[10px\\]\\/none { + font-size: 10px; + line-height: 1; + } + .text-\\[12px\\]\\/6 { font-size: 12px; line-height: calc(var(--spacing) * 6); @@ -15028,6 +15038,16 @@ test('text', async () => { line-height: 4px; } + .text-sm\\/none { + font-size: var(--text-sm); + line-height: 1; + } + + .text-sm\\/snug { + font-size: var(--text-sm); + line-height: var(--leading-snug); + } + .text-\\[12px\\] { font-size: 12px; } @@ -15121,29 +15141,39 @@ test('text', async () => { }" `) expect( - await run([ - 'text', - // color - '-text-red-500', - '-text-red-500/50', - '-text-red-500/[0.5]', - '-text-red-500/[50%]', - '-text-current', - '-text-current/50', - '-text-current/[0.5]', - '-text-current/[50%]', - '-text-inherit', - '-text-transparent', - '-text-[#0088cc]', - '-text-[#0088cc]/50', - '-text-[#0088cc]/[0.5]', - '-text-[#0088cc]/[50%]', - - // font-size / line-height / letter-spacing / font-weight - '-text-sm', - '-text-sm/6', - '-text-sm/[4px]', - ]), + await compileCss( + css` + @theme inline reference { + --text-sm: 0.875rem; + } + @tailwind utilities; + `, + [ + 'text', + // color + '-text-red-500', + '-text-red-500/50', + '-text-red-500/[0.5]', + '-text-red-500/[50%]', + '-text-current', + '-text-current/50', + '-text-current/[0.5]', + '-text-current/[50%]', + '-text-inherit', + '-text-transparent', + '-text-[#0088cc]', + '-text-[#0088cc]/50', + '-text-[#0088cc]/[0.5]', + '-text-[#0088cc]/[50%]', + + // font-size / line-height / letter-spacing / font-weight + '-text-sm', + '-text-sm/6', + 'text-sm/foo', + '-text-sm/[4px]', + 'text-[10px]/foo', + ], + ), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 99c8b4282a40..66caeb4ee006 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4040,9 +4040,16 @@ export function createUtilities(theme: Theme) { modifier = `calc(${multiplier} * ${candidate.modifier.value})` } + // Shorthand for `leading-none` + if (!modifier && candidate.modifier.value === 'none') { + modifier = '1' + } + if (modifier) { return [decl('font-size', value), decl('line-height', modifier)] } + + return null } return [decl('font-size', value)] @@ -4086,6 +4093,15 @@ export function createUtilities(theme: Theme) { modifier = `calc(${multiplier} * ${candidate.modifier.value})` } + // Shorthand for `leading-none` + if (!modifier && candidate.modifier.value === 'none') { + modifier = '1' + } + + if (!modifier) { + return null + } + let declarations = [decl('font-size', fontSize)] modifier && declarations.push(decl('line-height', modifier)) return declarations