Add --tw-gradient-via to linear gradient custom properties

[Elarcis]

Context

Tailwind offers a linear gradient feature. Start and end colours can be defined with .from-* and .to-* classes, and a third, intermediary colour can be added with .via-* classes.

Right now, adding a .via-* class for a three steps linear gradient adds the following CSS (here with the colour brand-primary):

.via-brand-primary {
    --tw-gradient-to: rgb(var(--brand-primary) / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--brand-primary) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

As you can see, from and to are nested in a CSS custom property, while the via part is expanded in the middle of --tw-gradient-stops (please also note that --tw-gradient-via-position already exists). As a reminder, --tw-gradient-from and --tw-gradient-to variables look like the following:

--tw-gradient-from: rgb(var(--background-04) / 1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(var(--background-04) / 0) var(--tw-gradient-to-position);

Request

It would be great if there was, similarly to --tw-gradient-from and --tw-gradient-to, a --tw-gradient-via variable, so that e.g. using the .via-brand-primary class would give this CSS:

.via-brand-primary {
    --tw-gradient-via: rgb(var(--brand-primary) / 0)  var(--tw-gradient-via-position);
    --tw-gradient-to: rgb(var(--brand-primary) / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

Why this feature?

1. More consistent with how from and to are implemented
2. I programmatically change the --tw-gradient-*-position properties to position a three steps CSS gradient, this would simplify my work as I wouldn’t have to manually set a via workaround:

<input
  :style="{
    '--tw-gradient-via': `rgb(var(--brand-primary) / 1) var(--tw-gradient-via-position)`,
    '--tw-gradient-via-position': `${accentPositions[0]}% ${accentPositions[1]}%`,
    '--tw-gradient-from-position': `0 ${accentPositions[0]}%`,
    '--tw-gradient-to-position': `${accentPositions[1]}% 100%`,
    '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)`,
  }"
/>

Does this break any existing feature?

I don’t think so. The via feature already exists and works by overriding --tw-gradient-stops and setting a transparent --tw-gradient-to.

This change would just nest one aspect of --tw-gradient-stops into two more CSS custom properties for more consistency and easier programmatic access, while the others gradient rules would keep access and priority over --tw-gradient-stops and the defaulted --tw-gradient-to.