Cannot use leading-from-1.1 with @utility in Tailwind 4.1 – float values not recognized

[mustafa-soylemez]

Hello 👋

I'm trying to create a custom utility using the new @Utility feature in Tailwind 4.1, and I'm running into an issue when using float values like 1.1.

Here’s the use case:

<div class="leading-from-1.1 leading-to-1.25">

@utility leading-from-* {
  --leading-from: --value([*]);
  --leading-min-vw: --modifier([*]);
}

@utility leading-to-* {
  --leading-to: --value([*]);
  --leading-max-vw: --modifier([*]);
}

[class*='leading-from-'][class*='leading-to-'] {
  line-height: clamp(
    var(--leading-from),
    calc(
      var(--leading-from) + (var(--leading-to) - var(--leading-from)) * var(--leading-ratio)
    ),
    var(--leading-to)
  );
}

The problem:
Classes like leading-from-1.25 work just fine.
But when I try leading-from-1.1, 1.0, or 1.10, they are completely ignored by Tailwind.
No utility is generated, and no --leading-from variable is output.

I tried:

• Using --value([*]) instead of --value(number)
• Writing the class as leading-from-1.10, leading-from-1.00, etc.
• Escaping the dot (e.g. leading-from-1.1) — no change
• Switching to arbitrary values like leading-from-[1.1] (this works, but loses utility class semantics)

I understand that class names with decimals can be problematic, but Tailwind seems to accept some floats (1.25, 1.5, etc.) while silently rejecting others like 1.1 or 1.0.

What I’m looking for:

• Is this a known limitation or bug in the current parser?
• Is there a way to force Tailwind to accept float values like 1.1, 1.0, 1.10 as valid utility inputs using @Utility?
• Or should I switch to encoding these values as integers (e.g. leading-from-110 → calc(110 / 100))? That works, but is less readable.

Any guidance or workaround suggestions would be really appreciated 🙏

Thanks in advance for your help and for all the amazing work on Tailwind!

[wongjn]

Your --value() and --modifier() parameters [*], mean arbitrary value [] of any type *. Hence, you'd need to use the arbitrary syntax with square brackets in the class name, leading-from-[1.1] leading-to-[1.25]

https://play.tailwindcss.com/7bbRbImWUm

[mustafa-soylemez]

Thanks for the clarification!

So if I understand correctly:

Even when using --value([*]) or --modifier([*]) in a @Utility, the class name itself must still follow Tailwind’s arbitrary value syntax (i.e. square brackets), like:
leading-from-[1.1] leading-to-[1.25]

Meaning that writing just:
leading-from-1.1

...won’t ever be matched or compiled, because Tailwind doesn’t treat that as an arbitrary value — even though [*] was used in the utility definition. Got it 👍

I was hoping to allow more natural semantic class names without the brackets, but I now see why that wouldn’t work under the current design.

Thanks again for confirming — super helpful!