Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
bg-gradient auto-transparent calculation doesn't work when parent element uses two colour gradient
**What version of Tailwind CSS are you using?**

v3.0.24

**What build tool (or framework if it abstracts the build tool) are you using?**

postcss-loader@7.0.0 webpack@5.72.1
Also through cdn package <script src="https://cdn.tailwindcss.com"></script>

**What version of Node.js are you using?**

v16.15.0

**What browser are you using?**

Firefox, Chrome, Safari
All latest

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/w4cImWRzrB

**Describe your issue**

When creating a transparent gradient the guidance is to not include to-transparent to let tailwind calculate the correct transparent to color to avoid a safari bug. If this happens on a child element where the parent element uses a gradient background with two colors defined then the transparent color is set to the parents to color.


Hints:

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1437,7 +1437,8 @@ export let corePlugins = {
 
             return {
               '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
+              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
@@ -1449,10 +1450,11 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
+              '--tw-gradient-to': transparentToValue,
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                 value,
                 'via'
-              )}, var(--tw-gradient-to, ${transparentToValue})`,
+              )}, var(--tw-gradient-to)`,
             }
           },
         },


Test patch:
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
@@ -651,18 +651,22 @@
 }
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0));
+  --tw-gradient-to: rgb(218 91 102 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-\[var\(--color\)\] {
   --tw-gradient-from: var(--color);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0));
+  --tw-gradient-to: rgb(255 255 255 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-\[\#da5b66\] {
-  --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to, rgb(218 91 102 / 0));
+  --tw-gradient-to: rgb(218 91 102 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to);
 }
 .via-\[var\(--color\)\] {
+  --tw-gradient-to: rgb(255 255 255 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color),
-    var(--tw-gradient-to, rgb(255 255 255 / 0));
+    var(--tw-gradient-to);
 }
 .to-\[\#da5b66\] {
   --tw-gradient-to: #da5b66;
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
@@ -596,10 +596,12 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
+  --tw-gradient-to: rgb(252 165 165 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
+  --tw-gradient-to: rgb(233 213 255 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa;
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
@@ -167,7 +167,8 @@ test('utilities that support any type are supported', async () => {
     expect(result.css).toMatchFormattedCss(css`
       .from-red-500\/50 {
         --tw-gradient-from: rgb(239 68 68 / 0.5);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0));
+        --tw-gradient-to: rgb(239 68 68 / 0);
+        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
       }
       .fill-red-500\/25 {
         fill: rgb(239 68 68 / 0.25);
diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css
--- a/tests/kitchen-sink.test.css
+++ b/tests/kitchen-sink.test.css
@@ -261,7 +261,8 @@ div {
 }
 .from-foo {
   --tw-gradient-from: #bada55;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(186 218 85 / 0));
+  --tw-gradient-to: rgb(186 218 85 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .text-center {
   text-align: center;
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
@@ -34,19 +34,21 @@ test('opacity variables are given to colors defined as closures', () => {
     expect(result.css).toMatchFormattedCss(css`
       .from-primary {
         --tw-gradient-from: rgb(31, 31, 31);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
+        --tw-gradient-to: rgba(31, 31, 31, 0);
+        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
       }
       .from-secondary {
         --tw-gradient-from: hsl(10, 50%, 50%);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(10 50% 50% / 0));
+        --tw-gradient-to: hsl(10 50% 50% / 0);
+        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
       }
       .via-primary {
-        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
-          var(--tw-gradient-to, rgba(31, 31, 31, 0));
+        --tw-gradient-to: rgba(31, 31, 31, 0);
+        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to);
       }
       .via-secondary {
-        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
-          var(--tw-gradient-to, hsl(10 50% 50% / 0));
+        --tw-gradient-to: hsl(10 50% 50% / 0);
+        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to);
       }
       .to-primary {
         --tw-gradient-to: rgb(31, 31, 31);
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
@@ -412,10 +412,12 @@
 }
 .from-red-300 {
   --tw-gradient-from: #fca5a5;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
+  --tw-gradient-to: rgb(252 165 165 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .via-purple-200 {
-  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
+  --tw-gradient-to: rgb(233 213 255 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
 }
 .to-blue-400 {
   --tw-gradient-to: #60a5fa;