padding-left not applied when using CSS clamp() with custom properties in utility class

[mustafa-soylemez]

Hi everyone,

I'm currently attempting to create a fluid utility class for padding-left using CSS custom properties and clamp(). However, despite all variables being correctly defined and rendered in the final CSS output, the padding-left is not applied in the browser.

https://play.tailwindcss.com/GMld5klVSF

Here's the setup:

@utility pl-from-* {
  --pl-from: --spacing(--value(integer));
  --pl-from: --value([ *]);
  --pl-min-vw: calc(--modifier(integer) * 1px);
  --pl-min-vw: --modifier([ *]);
}

@utility pl-to-* {
  --pl-to: --spacing(--value(integer));
  --pl-to: --value([ *]);
  --pl-max-vw: calc(--modifier(integer) * 1px);
  --pl-max-vw: --modifier([ *]);
}

[class*="pl-from-"][class*="pl-to-"] {
  padding-left: clamp(
    var(--pl-from),
    round(
      nearest,
      calc(
        var(--pl-from) + (var(--pl-to) - var(--pl-from)) *
          (
            (100vw - var(--pl-min-vw, var(--viewport-min))) /
              (var(--pl-max-vw, var(--viewport-max)) - var(--pl-min-vw, var(--viewport-min)))
          )
      ),
      1px
    ),
    var(--pl-to)
  );
}

Additional notes:

• All variables are output correctly in the dev tools.
• All values (like --pl-from, --pl-to, etc.) resolve to valid px values (e.g. 16px, 64px).
• The browser does not apply padding-left at all — the computed style shows nothing, and there is no invalid value warning.
• If I replace the calc() inside clamp() with a static value (like 30px), the property works.
• If I hardcode the calc() without var(), it works.
• Seems like combining clamp() + calc() + var() for complex expressions silently fails.

My guess:
This might be a browser parsing limitation with how var() behaves in mathematical expressions — especially if fallback variables are used. But I wonder if there is any known workaround or if Tailwind’s @Utility system could improve how these values are generated/resolved?

Thanks in advance for any insights you might have 🙏

[wongjn]

The problem is the calc() expression inside round(). Breaking it down by types:

 var(--pl-from) + (var(--pl-to) - var(--pl-from))  * ( (100vw - var(--pl-min-vw, var(--viewport-min)))  /  (var(--pl-max-vw, var(--viewport-max)) - var(--pl-min-vw, var(--viewport-min))) )
┗━━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━┛ * (┗━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━┛ / ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <length> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛)

So the types become:

calc( <length> * ( <length> / <length> ) )

This is invalid since you cannot multiply or divide <length> types together. Only one of these type signatures would work:

calc( <length> * ( <number> / <number> ) )
calc( <number> * ( <length> / <number> ) )

[mustafa-soylemez]

Thank you for detailed answer