Repository: tailwindlabs/tailwindcss

Problem statement:
Unexpected gradient-stop behavior across light and dark modes
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**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](https://play.tailwindcss.com/i3a4lpE2I3)

**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](https://play.tailwindcss.com/i3a4lpE2I3)): `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:

```css
@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`

<img width="418" alt="image" src="https://user-images.githubusercontent.com/4250423/231343342-468dd81a-02b8-4ade-95c1-d70096c02f18.png" />


Hints:

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1750,7 +1750,13 @@ export let corePlugins = {
       return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
     }
 
-    return function ({ matchUtilities, theme }) {
+    return function ({ matchUtilities, theme, addDefaults }) {
+      addDefaults('gradient-color-stops', {
+        '--tw-gradient-from-position': ' ',
+        '--tw-gradient-via-position': ' ',
+        '--tw-gradient-to-position': ' ',
+      })
+
       let options = {
         values: flattenColorPalette(theme('gradientColorStops')),
         type: ['color', 'any'],
@@ -1767,13 +1773,9 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': `${toColorValue(
-                value,
-                'from'
-              )} var(--tw-gradient-from-position)`,
-              '--tw-gradient-from-position': ' ',
-              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-from-position)`,
-              '--tw-gradient-to-position': ' ',
+              '@defaults gradient-color-stops': {},
+              '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
+              '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
               '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
@@ -1798,12 +1800,10 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-via-position': ' ',
+              '@defaults gradient-color-stops': {},
               '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
-              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
-                value,
-                'via'
+                value
               )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
@@ -1825,8 +1825,8 @@ export let corePlugins = {
       matchUtilities(
         {
           to: (value) => ({
-            '--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
-            '--tw-gradient-to-position': ' ',
+            '@defaults gradient-color-stops': {},
+            '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
           }),
         },
         options


Test patch:
diff --git a/tests/any-type.test.js b/tests/any-type.test.js
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -500,21 +500,16 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-\[var\(--any-value\)\] {
           --tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-\[var\(--any-value\)\] {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from),
             var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
         }
         .to-\[var\(--any-value\)\] {
           --tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .fill-\[var\(--any-value\)\] {
           fill: var(--any-value);
@@ -1063,21 +1058,16 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-\[var\(--any-value\)\] {
           --tw-gradient-from: var(--any-value) var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-\[var\(--any-value\)\] {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from),
             var(--any-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
         }
         .to-\[var\(--any-value\)\] {
           --tw-gradient-to: var(--any-value) var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .fill-\[var\(--any-value\)\] {
           fill: var(--any-value);
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -134,13 +134,13 @@
   min-height: var(--height);
 }
 .w-\[\'\)\(\)\'\] {
-  width: ")()";
+  width: ')()';
 }
 .w-\[\'\]\[\]\'\] {
-  width: "][]";
+  width: '][]';
 }
 .w-\[\'\}\{\}\'\] {
-  width: "}{}";
+  width: '}{}';
 }
 .w-\[\(\(\)\)\] {
   width: (());
@@ -176,7 +176,7 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}}
 }
 .w-\[\{\}\] {
   width: {}
@@ -345,10 +345,10 @@
   cursor: pointer;
 }
 .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
-  cursor: url("./path_to_hand.cur") 2 2, pointer;
+  cursor: url('./path_to_hand.cur') 2 2, pointer;
 }
 .cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
-  cursor: url("hand.cur") 2 2, pointer;
+  cursor: url('hand.cur') 2 2, pointer;
 }
 .cursor-\[var\(--value\)\] {
   cursor: var(--value);
@@ -406,13 +406,13 @@
   scroll-padding-top: var(--scroll-padding);
 }
 .list-\[\'\\1f44d\'\] {
-  list-style-type: "👍";
+  list-style-type: '👍';
 }
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
@@ -653,46 +653,36 @@
   background-image: linear-gradient(to left, rgb(var(--green)), blue);
 }
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
-  background-image: url("/path-to-image.png");
+  background-image: url('/path-to-image.png');
 }
 .bg-\[url\:var\(--url\)\] {
   background-image: var(--url);
 }
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-\[var\(--color\)\] {
   --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-\[\#da5b66\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .via-\[var\(--color\)\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-\[\#da5b66\] {
   --tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .to-\[var\(--color\)\] {
   --tw-gradient-to: var(--color) var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .bg-\[length\:200px_100px\] {
   background-size: 200px 100px;
@@ -713,7 +703,7 @@
   fill: #da5b66;
 }
 .fill-\[url\(\#icon-gradient\)\] {
-  fill: url("#icon-gradient");
+  fill: url('#icon-gradient');
 }
 .fill-\[var\(--value\)\] {
   fill: var(--value);
@@ -725,7 +715,7 @@
   stroke: var(--value);
 }
 .stroke-\[url\(\#icon-gradient\)\] {
-  stroke: url("#icon-gradient");
+  stroke: url('#icon-gradient');
 }
 .stroke-\[20px\] {
   stroke-width: 20px;
@@ -787,7 +777,7 @@
   font-family: Some Font, sans-serif;
 }
 .font-\[\'Some_Font\'\,var\(--other-font\)\] {
-  font-family: "Some Font", var(--other-font);
+  font-family: 'Some Font', var(--other-font);
 }
 .font-\[Georgia\,serif\] {
   font-family: Georgia, serif;
@@ -1062,11 +1052,11 @@
   will-change: var(--will-change);
 }
 .content-\[\'\>\'\] {
-  --tw-content: ">";
+  --tw-content: '>';
   content: var(--tw-content);
 }
 .content-\[\'hello\'\] {
-  --tw-content: "hello";
+  --tw-content: 'hello';
   content: var(--tw-content);
 }
 .content-\[attr\(content-before\)\] {
@@ -1078,4 +1068,3 @@
     grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
   }
 }
-
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -176,7 +176,7 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}}
 }
 .w-\[\{\}\] {
   width: {}
@@ -412,7 +412,7 @@
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
@@ -689,39 +689,29 @@
 }
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #da5b6600 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-\[var\(--color\)\] {
   --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-\[\#da5b66\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #da5b6600 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #da5b66 var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .via-\[var\(--color\)\] {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-\[\#da5b66\] {
   --tw-gradient-to: #da5b66 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .to-\[var\(--color\)\] {
   --tw-gradient-to: var(--color) var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .bg-\[length\:200px_100px\] {
   background-size: 200px 100px;
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -608,21 +611,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;
@@ -1028,4 +1026,3 @@
   --tw-content: none;
   content: var(--tw-content);
 }
-
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -626,21 +629,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;
diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
--- a/tests/color-opacity-modifiers.test.js
+++ b/tests/color-opacity-modifiers.test.js
@@ -173,9 +173,7 @@ crosscheck(({ stable, oxide }) => {
       expect(result.css).toMatchFormattedCss(css`
         .from-red-500\/50 {
           --tw-gradient-from: #ef444480 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #ef444400 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .fill-red-500\/25 {
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -528,9 +528,7 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-foo {
           --tw-gradient-from: #bada55 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #bada5500 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #bada5500 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .px-1 {
@@ -1090,9 +1088,7 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-foo {
           --tw-gradient-from: #bada55 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #bada5500 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #bada5500 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .px-1 {
diff --git a/tests/oxide-svelte.test.css b/tests/oxide-svelte.test.css
--- a/tests/oxide-svelte.test.css
+++ b/tests/oxide-svelte.test.css
@@ -14,6 +14,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
@@ -60,6 +63,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js
--- a/tests/plugins/gradientColorStops.test.js
+++ b/tests/plugins/gradientColorStops.test.js
@@ -35,39 +35,29 @@ crosscheck(({ stable, oxide }) => {
       stable.expect(result.css).toMatchFormattedCss(css`
         .from-primary {
           --tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .from-secondary {
           --tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-primary {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from), #1f1f1f var(--tw-gradient-via-position),
             var(--tw-gradient-to);
         }
         .via-secondary {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from), #bf5540 var(--tw-gradient-via-position),
             var(--tw-gradient-to);
         }
         .to-primary {
           --tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .to-secondary {
           --tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .text-primary {
           --tw-text-opacity: 1;
@@ -84,39 +74,29 @@ crosscheck(({ stable, oxide }) => {
       oxide.expect(result.css).toMatchFormattedCss(css`
         .from-primary {
           --tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .from-secondary {
           --tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .via-primary {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from), #1f1f1f var(--tw-gradient-via-position),
             var(--tw-gradient-to);
         }
         .via-secondary {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from), #bf5540 var(--tw-gradient-via-position),
             var(--tw-gradient-to);
         }
         .to-primary {
           --tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .to-secondary {
           --tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .text-primary {
           color: #1f1f1f;
@@ -154,16 +134,12 @@ crosscheck(({ stable, oxide }) => {
         }
         .from-\[--from-value\] {
           --tw-gradient-from: var(--from-value) var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #fff0 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .from-red-500 {
           --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
-          --tw-gradient-from-position: ;
-          --tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
-          --tw-gradient-to-position: ;
+          --tw-gradient-to: #ef444400 var(--tw-gradient-to-position);
           --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
         }
         .from-10\% {
@@ -176,16 +152,12 @@ crosscheck(({ stable, oxide }) => {
           --tw-gradient-from-position: 12px;
         }
         .via-\[--via-value\] {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from),
             var(--via-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
         }
         .via-pink-500 {
-          --tw-gradient-via-position: ;
           --tw-gradient-to: #ec489900 var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
           --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position),
             var(--tw-gradient-to);
         }
@@ -200,11 +172,9 @@ crosscheck(({ stable, oxide }) => {
         }
         .to-\[--to-value\] {
           --tw-gradient-to: var(--to-value) var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .to-violet-400 {
           --tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
-          --tw-gradient-to-position: ;
         }
         .to-30\% {
           --tw-gradient-to-position: 30%;
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -424,21 +424,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -436,21 +436,16 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
-  --tw-gradient-from-position: ;
-  --tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
-  --tw-gradient-to-position: ;
+  --tw-gradient-to: #fca5a500 var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-via-position: ;
   --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
   --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
-  --tw-gradient-to-position: ;
 }
 .decoration-slice {
   -webkit-box-decoration-break: slice;
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -308,84 +308,90 @@ crosscheck(({ stable, oxide }) => {
       '2:6-20 -> 384:2-15',
       '2:6-20 -> 385:2-20',
       '2:6-20 -> 386:2-40',
-      '2:6-20 -> 387:2-17',
-      '2:6-20 -> 388:2-22',
-      '2:6-20 -> 389:2-24',
-      '2:6-20 -> 390:2-25',
-      '2:6-20 -> 391:2-26',
-      '2:6-20 -> 392:2-20',
-      '2:6-20 -> 393:2-29',
-      '2:6-20 -> 394:2-30',
-      '2:6-20 -> 395:2-40',
-      '2:6-20 -> 396:2-36',
-      '2:6-20 -> 397:2-29',
-      '2:6-20 -> 398:2-24',
-      '2:6-20 -> 399:2-32',
-      '2:6-20 -> 400:2-14',
-      '2:6-20 -> 401:2-20',
-      '2:6-20 -> 402:2-18',
-      '2:6-20 -> 403:2-19',
+      '2:6-20 -> 387:2-32',
+      '2:6-20 -> 388:2-31',
+      '2:6-20 -> 389:2-30',
+      '2:6-20 -> 390:2-17',
+      '2:6-20 -> 391:2-22',
+      '2:6-20 -> 392:2-24',
+      '2:6-20 -> 393:2-25',
+      '2:6-20 -> 394:2-26',
+      '2:6-20 -> 395:2-20',
+      '2:6-20 -> 396:2-29',
+      '2:6-20 -> 397:2-30',
+      '2:6-20 -> 398:2-40',
+      '2:6-20 -> 399:2-36',
+      '2:6-20 -> 400:2-29',
+      '2:6-20 -> 401:2-24',
+      '2:6-20 -> 402:2-32',
+      '2:6-20 -> 403:2-14',
       '2:6-20 -> 404:2-20',
-      '2:6-20 -> 405:2-16',
-      '2:6-20 -> 406:2-18',
-      '2:6-20 -> 407:2-15',
-      '2:6-20 -> 408:2-21',
-      '2:6-20 -> 409:2-23',
-      '2:6-20 -> 410:2-29',
-      '2:6-20 -> 411:2-27',
-      '2:6-20 -> 412:2-28',
+      '2:6-20 -> 405:2-18',
+      '2:6-20 -> 406:2-19',
+      '2:6-20 -> 407:2-20',
+      '2:6-20 -> 408:2-16',
+      '2:6-20 -> 409:2-18',
+      '2:6-20 -> 410:2-15',
+      '2:6-20 -> 411:2-21',
+      '2:6-20 -> 412:2-23',
       '2:6-20 -> 413:2-29',
-      '2:6-20 -> 414:2-25',
-      '2:6-20 -> 415:2-26',
-      '2:6-20 -> 416:2-27',
-      '2:6 -> 417:2',
-      '2:20 -> 418:0',
-      '2:6 -> 420:0',
-      '2:6-20 -> 421:2-26',
-      '2:6-20 -> 422:2-26',
-      '2:6-20 -> 423:2-21',
-      '2:6-20 -> 424:2-21',
-      '2:6-20 -> 425:2-16',
-      '2:6-20 -> 426:2-16',
-      '2:6-20 -> 427:2-16',
-      '2:6-20 -> 428:2-17',
-      '2:6-20 -> 429:2-17',
-      '2:6-20 -> 430:2-15',
-      '2:6-20 -> 431:2-15',
-      '2:6-20 -> 432:2-20',
-      '2:6-20 -> 433:2-40',
-      '2:6-20 -> 434:2-17',
-      '2:6-20 -> 435:2-22',
-      '2:6-20 -> 436:2-24',
-      '2:6-20 -> 437:2-25',
-      '2:6-20 -> 438:2-26',
-      '2:6-20 -> 439:2-20',
-      '2:6-20 -> 440:2-29',
-      '2:6-20 -> 441:2-30',
-      '2:6-20 -> 442:2-40',
-      '2:6-20 -> 443:2-36',
-      '2:6-20 -> 444:2-29',
-      '2:6-20 -> 445:2-24',
-      '2:6-20 -> 446:2-32',
-      '2:6-20 -> 447:2-14',
-      '2:6-20 -> 448:2-20',
-      '2:6-20 -> 449:2-18',
-      '2:6-20 -> 450:2-19',
-      '2:6-20 -> 451:2-20',
-      '2:6-20 -> 452:2-16',
-      '2:6-20 -> 453:2-18',
-      '2:6-20 -> 454:2-15',
-      '2:6-20 -> 455:2-21',
-      '2:6-20 -> 456:2-23',
-      '2:6-20 -> 457:2-29',
-      '2:6-20 -> 458:2-27',
-      '2:6-20 -> 459:2-28',
-      '2:6-20 -> 460:2-29',
-      '2:6-20 -> 461:2-25',
-      '2:6-20 -> 462:2-26',
-      '2:6-20 -> 463:2-27',
-      '2:6 -> 464:2',
-      '2:20 -> 465:0',
+      '2:6-20 -> 414:2-27',
+      '2:6-20 -> 415:2-28',
+      '2:6-20 -> 416:2-29',
+      '2:6-20 -> 417:2-25',
+      '2:6-20 -> 418:2-26',
+      '2:6-20 -> 419:2-27',
+      '2:6 -> 420:2',
+      '2:20 -> 421:0',
+      '2:6 -> 423:0',
+      '2:6-20 -> 424:2-26',
+      '2:6-20 -> 425:2-26',
+      '2:6-20 -> 426:2-21',
+      '2:6-20 -> 427:2-21',
+      '2:6-20 -> 428:2-16',
+      '2:6-20 -> 429:2-16',
+      '2:6-20 -> 430:2-16',
+      '2:6-20 -> 431:2-17',
+      '2:6-20 -> 432:2-17',
+      '2:6-20 -> 433:2-15',
+      '2:6-20 -> 434:2-15',
+      '2:6-20 -> 435:2-20',
+      '2:6-20 -> 436:2-40',
+      '2:6-20 -> 437:2-32',
+      '2:6-20 -> 438:2-31',
+      '2:6-20 -> 439:2-30',
+      '2:6-20 -> 440:2-17',
+      '2:6-20 -> 441:2-22',
+      '2:6-20 -> 442:2-24',
+      '2:6-20 -> 443:2-25',
+      '2:6-20 -> 444:2-26',
+      '2:6-20 -> 445:2-20',
+      '2:6-20 -> 446:2-29',
+      '2:6-20 -> 447:2-30',
+      '2:6-20 -> 448:2-40',
+      '2:6-20 -> 449:2-36',
+      '2:6-20 -> 450:2-29',
+      '2:6-20 -> 451:2-24',
+      '2:6-20 -> 452:2-32',
+      '2:6-20 -> 453:2-14',
+      '2:6-20 -> 454:2-20',
+      '2:6-20 -> 455:2-18',
+      '2:6-20 -> 456:2-19',
+      '2:6-20 -> 457:2-20',
+      '2:6-20 -> 458:2-16',
+      '2:6-20 -> 459:2-18',
+      '2:6-20 -> 460:2-15',
+      '2:6-20 -> 461:2-21',
+      '2:6-20 -> 462:2-23',
+      '2:6-20 -> 463:2-29',
+      '2:6-20 -> 464:2-27',
+      '2:6-20 -> 465:2-28',
+      '2:6-20 -> 466:2-29',
+      '2:6-20 -> 467:2-25',
+      '2:6-20 -> 468:2-26',
+      '2:6-20 -> 469:2-27',
+      '2:6 -> 470:2',
+      '2:20 -> 471:0',
     ])
   })
 
diff --git a/tests/util/defaults.js b/tests/util/defaults.js
--- a/tests/util/defaults.js
+++ b/tests/util/defaults.js
@@ -24,6 +24,9 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
       --tw-pan-y: ;
       --tw-pinch-zoom: ;
       --tw-scroll-snap-strictness: proximity;
+      --tw-gradient-from-position: ;
+      --tw-gradient-via-position: ;
+      --tw-gradient-to-position: ;
       --tw-ordinal: ;
       --tw-slashed-zero: ;
       --tw-numeric-figure: ;
diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css
--- a/tests/variants.oxide.test.css
+++ b/tests/variants.oxide.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;
diff --git a/tests/variants.test.css b/tests/variants.test.css
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -15,6 +15,9 @@
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
   --tw-ordinal: ;
   --tw-slashed-zero: ;
   --tw-numeric-figure: ;