Tailwind v4 `lineHeightActual` is resolved to `NaN`

[alexandernanberg]

In Tailwind v4 line heights can be defined as css calc() which breaks

Hacky patch that fixes it

diff --git a/dist/utilities.js b/dist/utilities.js
index a5cad611fbd540ba01cf42d7ac3d9d6d2adf2514..38a5f7fe3c5e8ef6b5117db9765914cd5b4cd484 100644
--- a/dist/utilities.js
+++ b/dist/utilities.js
@@ -79,7 +79,11 @@ function round(value) {
  * custom property.
  */
 function lineHeightProperties(lineHeight, rootSize = 16) {
-    let lineHeightActual = isRelativeValue(lineHeight)
+    let isCssFunction = /^(calc)\s*\(/i.test(lineHeight)
+
+    let lineHeightActual = isCssFunction ? 
+        `calc((${lineHeight}) * var(--font-size-px))`
+        : isRelativeValue(lineHeight)
         ? `calc(${getRelativeValue(lineHeight).toString()} * var(--font-size-px))`
         : normalizeValue(lineHeight, rootSize).toString();
     return {

[stormwarning]

I actually have a local branch that should fix this. I'll pick it up and try to get a fix out soon 💪

[stormwarning]

Hmm, this might be trickier than it looked: because line-height can be a custom property, or a calc() function that includes a custom property, and the plugin doesn't know what that resolves to...

Might have to add a new option to let the user set what unit their line-height is in 🤔

[DamianGlowala]

@stormwarning this affects us too, do you think proposed solution is good-enough for the time being to be released as a patch? We are either getting numbers or calc expressions in the lineHeight param.