Support safelisting default modifiers

Author: adamwathan

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([