Font size / line height shorthand doesn't apply `line-height` when leading value is `none`

[scullion]

What version of Tailwind CSS are you using?

v4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/vite 4.0.0, Vite 6.0.11

What version of Node.js are you using?

Node.js 20.x

What browser are you using?

Appears in all browsers tested.

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/ZmoWtl9NX5

Describe your issue

The font-size / line-height shorthand syntax (e.g., text-3xl/none) doesn't apply the line-height for none leading. The generated ruleset for, e.g. text-3xl/none doesn't contain the expected line-height: 1.

The example shows pairs of identical text at different sizes. Each pair shows:

• Left (red border): Using shorthand syntax (e.g., text-3xl/none)
• Right (blue border): Using separate classes (e.g., text-3xl leading-none)

Expected behavior:

• Both syntaxes should produce identical line heights
• The shorthand text-3xl/none should be equivalent to text-3xl leading-none
• The columns should look the same

Actual behavior:

• Text in the red column has its default line height.

Toggling the example to Tailwind v3 shows that this behavior is new with v4.

[wongjn]

It seems like this is because none is not really a "real" value for leading, from the default theme:

tailwindcss/packages/tailwindcss/theme.css

Lines 341 to 345 in 7e20c3b

	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

And instead, leading-none is statically defined:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 3751 to 3755 in 7e20c3b

	staticUtility('leading-none', [
	() => atRoot([property('--tw-leading')]),
	['--tw-leading', '1'],
	['line-height', '1'],
	])

Perhaps this is supposed to inject it as a value somehow but doesn't work. As a work-around, you could redefine none in your own theme:

@theme {
  --leading-none: 1
}

Or use /[1], like text-sm/[1]

https://play.tailwindcss.com/otayRXKzCK

[RobinMalfait]

Hey!

Thanks for the bug report. As @wongjn pointed out, a workaround for now is to either add a --leading-none value, or use /[1].

That said, this issue has been fixed in #15921 such that text-sm/none will work in the next version.

[scullion]

Thank you @wongjn for the investigation and @RobinMalfait for the speedy fix. I wound up changing a lot of places to /[1] but the --leading-none: 1; workaround is a lot easier, thanks.