[v4] Gradient percentage range not working anymore (e.g. via-[percentage:10%_90%])

[ramrami]

What version of Tailwind CSS are you using?
v4.0.7

What build tool (or framework if it abstracts the build tool) are you using?
gulp v5.0.0 + Postcss

What version of Node.js are you using?
v20.18.1

What browser are you using?
Brave + Safari

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/16SCposb3z

Describe your issue

Using the following class doesn't give the desired result in v4:
bg-gradient-to-r from-sky-500 to-sky-500 via-rose-500 via-[percentage:10%_90%]

v3

v4

The browser considers the property as invalid because it's not a <length-percentage>:

[philipp-spiess]

That's definitely a "pick your poison" kind of situation. If we change the type of the --tw-gradient-via-position variable, you won't be able to animate it anymore but otherwise you can only add one percentage value here. 🤔

A temporary solution for you might be to use arbitrary values instead: https://play.tailwindcss.com/J11BlY9xhK

bg-[linear-gradient(to_right,var(--color-sky-500)_0%,var(--color-rose-500)_10%,var(--color-rose-500)_90%,_var(--color-sky-500)_100%)]

[ramrami]

Yeah, that makes sense.

If I may suggest, maybe we could split this variable in two? since every color stop has one or two positions, we could use --tw-gradient-via-start-position and --tw-gradient-via-end-position

[ramrami]

Nevermind my previous suggestion, just remembered that @Property vars need a default value, so it probably won't work because you can't leave the values blank like in v3 🤔

Edit: see #15910

[thecrypticace]

Hey, as you've pointed out @property does require a default value (when syntax isn't *). Given that we want these values to be animatable (and explicitly designed stuff around making this possible for v4), I think it's best to close this as "working as intended".

Using a arbitrary value like @philipp-spiess suggested seems like a reasonable workaround.