Description
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
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
