Unexpected gradient-stop behavior across light and dark modes

[QuintonC]

What version of Tailwind CSS are you using?

v3.3.1

What build tool (or framework if it abstracts the build tool) are you using?

"@remix-run/react": "^1.14.1"
"postcss-cli": "^10.1.0"

What version of Node.js are you using?

v16.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Tailwind Play

Describe your issue

Utilizing the newest tailwind from- and to- features for specifying gradient color stops seems to be referencing only the from color definition when there is a specifier for both viewing modes (with and without the dark variant).

For example, the following className will yield some unexpected results (Tailwind Play): bg-gradient-to-br from-white from-15% to-neutral-200 to-30% dark:from-neutral-500.

It seems reasonable to expect that dark:from-neutral-500 would yield the following CSS class:

@media (prefers-color-scheme: dark)
.dark\:from-neutral-500 {
    --tw-gradient-from: #737373 var(--tw-gradient-from-position);
    --tw-gradient-from-position: 15%;
    --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-from-position);
    --tw-gradient-to-position: 30%;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

However, the result lacks the --tw-gradient-from-position and --tw-gradient-to-position. The following screenshot shows that not only is the definition missing, but it's also referencing from-position rather than to-position for the to-color

[thecrypticace]

I've merged a fix for both things outlined here in #11002:

• from-{color} no longer incorrectly references the from position for the to color stop (good catch!)
• from-{position} / via-{position} / to-{position} are now inherited instead of being overridden — this means your example will work in the next v3.3.x release.

Note: We can't inherit the color versions of from/via/to because of an issue with gradients including fully transparent colors in Safari < 15.4. But we may change this for v4.

Thanks for reporting this! ✨