Add test and readme note about referencing theme colors

Author: benface

README.md

@@ -38,6 +38,24 @@ npm install tailwindcss-gradients
   ],
 }
 ```
+or you can reference your existing theme colors:
+```js
+{
+  theme: {
+    colors: {
+      'red': '#f00',
+      'blue': '#00f',
+    },
+    gradients: theme => ({
+      // directions: { ... },
+      colors: theme('colors'),
+    }),
+  },
+  plugins: [
+    require('tailwindcss-gradients')(),
+  ],
+}
+```
 
 This plugin generates the following utilities:
 

test.js

@@ -217,6 +217,35 @@ test('multiple directions and multiple gradients can be used together', () => {
   });
 });
 
+test('colors can be referenced from the theme with a closure', () => {
+  return generatePluginCss({
+    theme: {
+      colors: {
+        'red': '#f00',
+        'blue': '#00f',
+      },
+      gradients: theme => ({
+        directions: {
+          'b': 'to bottom',
+        },
+        colors: theme('colors'),
+      }),
+    },
+    variants: {
+      gradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-b-red {
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
+      }
+      .bg-gradient-b-blue {
+        background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), #00f);
+      }
+    `);
+  });
+});
+
 test('responsive utilities are generated by default', () => {
   return generatePluginCss({
     theme: {