[v4] fontSize configuration line-height shorthand broken in v4

[valtism]

What version of Tailwind CSS are you using?

v4.0.0-beta.9

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

NextJS 15.1.3

What version of Node.js are you using?

v20.11.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/valtism/tw-v4-fontsize

Vite repo showing the issue. Inspect the 3 text elements to see the second one has an invalid generated class.

See main.tsx and tailwind.config.js

Describe your issue

In v3, font size could be configured using an array shorthand of [size, line-height] https://tailwindcss.com/docs/font-size#providing-a-default-line-height

In v4 (using the config file) setting the font size only works, setting font size with a configuration object works, but using the 2-element array does not.

I would expect it to work to maintain compatibility.

[gerotakke]

Hi,
I just ran into this problem as well and then found this issue. I don't think the lightningcss update fixed this. I can still reproduce this with valtism's test case at https://github.com/valtism/tw-v4-fontsize with the 4.0 release version.

[valtism]

@philipp-spiess Can confirm this is still an issue

[reuhil16]

@philipp-spiess Given that the linked commit has no impact on the reported bug, can this be re-opened or should a new issue be created?

I have reproduced the issue in v4.0.5, it is definitely not fixed.

[philipp-spiess]

Oh, sorry, looks like I closed the wrong GitHub issue there.

[wongjn]

This is fixed in #17630, released in v4.1.4.

[artaommahe]

@wongjn still doesn't work with [ '1.25rem', { lineHeight: 'calc(1.75 / 1.25)' } ] format.

We're re-defining some values for tailwind's typography plugin like this

h1: {
  fontSize: theme('fontSize.xl'),
  lineHeight: theme('lineHeight.7'),
},

and this part fontSize: theme('fontSize.xl') doesn't work properly since v4 update. We have to use fontSize: theme('fontSize.xl')[0] for now.
Relevant documentation from v3 https://v3.tailwindcss.com/docs/font-size#providing-a-default-line-height (second part starting with 'You can also specify a default line height using the object syntax').

(or should i create another issue for this specific problem?)

[wongjn]

I think you were relying on incidental syntax. If we look at it in v3:

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  …
  font-size: 1.25rem;
  font-size: [object Object];
  …
}

It seems accidental that it works, since [object Object] is not a valid CSS value and thus falls back to 1.25rem.

Conversely, using fontSize: theme('fontSize.xl')[0], or fontSize: theme('fontSize.xl.0'), should indeed produce correct CSS:

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  …
  font-size: 1.25rem;
  …
}