[v4] Linear gradients behave differently: there is no smoothness between "via" and "to"

[ramrami]

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

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

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/9WOZcQlXDT

Describe your issue

Not sure if this is intentional or a regression, but in v4 there is no smoothness between "via" and "to"

The classes I'm using:
bg-gradient-to-r from-white/0 from-20% via-white to-50%
(I'm using bg-gradient instead of bg-linear to toggle between versions in the playground)

v4

v3

[wongjn]

In v3, --tw-gradient-via-position has a default of blank:

*, ::before, ::after {
  …
  --tw-gradient-via-position: ;
  …
}

Whereas in v4, it has a default of 50%:

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

Looking at the MDN docs for @property:

The initial-value descriptor is optional if the value of the syntax descriptor is the universal syntax definition (that is, syntax: "*"). If the initial-value descriptor is required but omitted, the entire @property rule is invalid and ignored.

So it seems like there needs to be a value since it has <length-percentage> otherwise the @property value gets completely ignored.

[ramrami]

Thanks @wongjn that seem to be the issue, adding via-35% gives the same result as v3.

Not sure if I should close this issue or if a fix should be made for backward compatibility, maybe adding a default value to the via-[color] classes outside the @Property that gets overridden when using via-[percent], something like
--tw-gradient-via-position: calc(var(--tw-gradient-from-position) + (var(--tw-gradient-to-position) - var(--tw-gradient-from-position)) / 2)

[adamwathan]

Yeah this is likely a bug, thanks for flagging!