[v4] Dynamically generated margin, padding, width, height, etc.; does not work with decimal numbers

[rozsazoltan]

Note

Tailwind CSS: v4.0.3

Reproduction

<div class="w-120.5 h-120.5 bg-green-50"></div>
<div class="w-120.1 h-120.5 bg-red-50"></div>

• TailwindCSS v4 Playground

Describe your issue

A central --spacing variable has been introduced, allowing infinite generation of margin, padding, width, height, etc.

Class	Styles
m-<number>	margin: calc(var(--spacing) * <number>);
-m-<number>	margin: calc(var(--spacing) * -<number>);

From this, I would assume that it should accept any integer and decimal number. However, it only works perfectly with integers and .5 decimals; values like .1, .2, ... .9 do not work.

[wongjn]

See #15702 (comment)

[rozsazoltan]

The documentation is unclear in this case. It doesn't explicitly state that it only works with integers and .5 decimal values. Besides, why shouldn't it work with other decimals just because 9 out of 10 developers prefer whole numbers? The whole point of this update is to break away from static norms, or not?

[RobinMalfait]

Hey!

This syntax is intended for simple numbers, the reason we made it work for .5 is because we already had m-1.5 in Tailwind CSS v3 and wanted it to be backwards compatible.

The purpose of this is feature is to solve a Tailwind CSS v3 issue where it is not clear that why w-28 works, but w-30 does not (v3 docs for the default spacing scale: https://v3.tailwindcss.com/docs/customizing-spacing#default-spacing-scale)

If you want to use any number, then you can use arbitrary value syntax, e.g.: m-[0.123px]
If you still want to use the value as a multiplier using the spacing scale, you can use the --spacing() function:

<div class="w-[--spacing(120.1)]"></div>

[rozsazoltan]

Thanks, the goal is clear now! The .5 is just for compatibility.

[AhmedElywa]

test

[mvaled]

I would argue this is a documentation bug instead. I have spent about an around trying to figure out why gap-3.4 didn't work...