Repository: tailwindlabs/tailwindcss-jit (js)

Issue:
gradientColorStops behaves differently
### What version of @tailwindcss/jit are you using?

v0.1.4

### What version of Node.js are you using?

14.10.1

### What browser are you using?

Chrome

### What operating system are you using?

Windows 10

### Reproduction repository

https://github.com/jayars/tailwindcss-jit-gradientcolorstop

Hi,

`gradientColorStops` seems to behave differently when using `@tailwindcss/jit`.

* `tailwindcss`: Custom gradient stops work
* `@tailwindcss/jit`: Custom gradient stops don't work

![image](https://user-images.githubusercontent.com/28939507/111862453-605dfb80-8990-11eb-86e6-d516cc68f4fe.png)

Not sure if this is as-designed or a bug.

`postcss.config.js`
```js
module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  },
}
```

`tailwind.config.js`
```js
module.exports = {
  ...
  theme: {
    extend: {
      gradientColorStops: {
        x: '#b1eafc',
        y: '#fbd7f8'
      }
    }
  }
  ...
}
```


Thanks


Pull request:
Fix extending gradient colors directly
Resolves #122

Patch:
diff --git a/src/corePlugins/gradientColorStops.js b/src/corePlugins/gradientColorStops.js
index c9ca6b3..5d1f4f8 100644
--- a/src/corePlugins/gradientColorStops.js
+++ b/src/corePlugins/gradientColorStops.js
@@ -1,4 +1,3 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
 const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
@@ -17,11 +16,11 @@ function transparentTo(value) {
   }
 }
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
-  let colorPalette = flattenColorPalette(theme.backgroundColor)
+module.exports = function ({ matchUtilities, theme }) {
+  let colorPalette = flattenColorPalette(theme('gradientColorStops'))
 
   matchUtilities({
-    from: (modifier, { theme }) => {
+    from: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {
@@ -39,7 +38,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     },
   })
   matchUtilities({
-    via: (modifier, { theme }) => {
+    via: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {
@@ -59,7 +58,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     },
   })
   matchUtilities({
-    to: (modifier, { theme }) => {
+    to: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {


Test patch:
diff --git a/tests/00-kitchen-sink.test.css b/tests/00-kitchen-sink.test.css
index cd056ad..cab8b2c 100644
--- a/tests/00-kitchen-sink.test.css
+++ b/tests/00-kitchen-sink.test.css
@@ -288,6 +288,13 @@ div {
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+.from-foo {
+  --tw-gradient-from: #bada55;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(186, 218, 85, 0));
+}
 .text-center {
   text-align: center;
 }
diff --git a/tests/00-kitchen-sink.test.html b/tests/00-kitchen-sink.test.html
index 91cc9dc..4366259 100644
--- a/tests/00-kitchen-sink.test.html
+++ b/tests/00-kitchen-sink.test.html
@@ -30,6 +30,7 @@
     <div class="filter-none filter-grayscale"></div>
     <div class="focus:font-normal"></div>
     <div class="font-medium"></div>
+    <div class="bg-gradient-to-r from-foo"></div>
     <div class="custom-component custom-util"></div>
     <div class="bg-opacity-50"></div>
     <div class="focus:ring-2 focus:ring-blue-500"></div>
diff --git a/tests/00-kitchen-sink.test.js b/tests/00-kitchen-sink.test.js
index eec4b93..92b9e63 100644
--- a/tests/00-kitchen-sink.test.js
+++ b/tests/00-kitchen-sink.test.js
@@ -19,6 +19,9 @@ test('it works', () => {
           range: { min: '1280px', max: '1535px' },
           multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
         },
+        gradientColorStops: {
+          foo: '#bada55',
+        },
       },
     },
     plugins: [