Merge pull request #92 from tailwindlabs/color-modifiers

Add color modifiers

Author: adamwathan

package.json

@@ -42,6 +42,6 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "snapshot-diff": "^0.8.1",
-    "tailwindcss": "^2.0.0-alpha.4"
+    "tailwindcss": "^2.0.0-alpha.16"
   }
 }

src/index.js

@@ -3,6 +3,7 @@ const merge = require('lodash/merge')
 const castArray = require('lodash/castArray')
 const uniq = require('lodash/uniq')
 const styles = require('./styles')
+const { isUsableColor } = require('./utils')
 
 const computed = {
   // Reserved for future "magic properties", for example:
@@ -19,10 +20,22 @@ function configToCss(config = {}) {
   )
 }
 
-const DEFAULT_MODIFIERS = ['DEFAULT', 'sm', 'lg', 'xl', '2xl']
 module.exports = plugin.withOptions(
-  ({ modifiers = DEFAULT_MODIFIERS, className = 'prose' } = {}) => {
+  ({ modifiers, className = 'prose' } = {}) => {
     return function ({ addComponents, theme, variants }) {
+      const DEFAULT_MODIFIERS = [
+        'DEFAULT',
+        'sm',
+        'lg',
+        'xl',
+        '2xl',
+        ...Object.entries(theme('colors'))
+          .filter(([color, values]) => {
+            return isUsableColor(color, values)
+          })
+          .map(([color]) => color),
+      ]
+      modifiers = modifiers === undefined ? DEFAULT_MODIFIERS : modifiers
       const config = theme('typography')
 
       const all = uniq([
@@ -41,5 +54,8 @@ module.exports = plugin.withOptions(
       )
     }
   },
-  () => ({ theme: { typography: styles }, variants: { typography: ['responsive'] } })
+  () => ({
+    theme: { typography: styles },
+    variants: { typography: ['responsive'] },
+  })
 )