Merge pull request #852 from tailwindcss/global-variants

Support configuring a single list of variants to apply to all relevant plugins

__tests__/plugins/backgroundColor.test.js

@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
   const pluginApi = {
     config: (key, defaultValue) => _.get(config, key, defaultValue),
     e: escapeClassName,
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return _.get(config.variants, path, defaultValue)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,

__tests__/plugins/borderColor.test.js

@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
   const pluginApi = {
     config: (key, defaultValue) => _.get(config, key, defaultValue),
     e: escapeClassName,
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return _.get(config.variants, path, defaultValue)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,

__tests__/plugins/fill.test.js

@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
   const pluginApi = {
     config: (key, defaultValue) => _.get(config, key, defaultValue),
     e: escapeClassName,
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return _.get(config.variants, path, defaultValue)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,

__tests__/plugins/stroke.test.js

@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
   const pluginApi = {
     config: (key, defaultValue) => _.get(config, key, defaultValue),
     e: escapeClassName,
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return _.get(config.variants, path, defaultValue)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,

__tests__/plugins/textColor.test.js

@@ -40,6 +40,13 @@ test('colors can be a nested object', () => {
   const pluginApi = {
     config: (key, defaultValue) => _.get(config, key, defaultValue),
     e: escapeClassName,
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return _.get(config.variants, path, defaultValue)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,

__tests__/processPlugins.test.js

@@ -657,6 +657,91 @@ test('plugins can access the current config', () => {
     `)
 })
 
+test('plugins can access the variants config directly', () => {
+  const { components, utilities } = processPlugins(
+    [
+      function({ addUtilities, variants }) {
+        addUtilities(
+          {
+            '.object-fill': {
+              'object-fit': 'fill',
+            },
+            '.object-contain': {
+              'object-fit': 'contain',
+            },
+            '.object-cover': {
+              'object-fit': 'cover',
+            },
+          },
+          variants('objectFit')
+        )
+      },
+    ],
+    makeConfig({
+      variants: {
+        objectFit: ['responsive', 'focus', 'hover'],
+      },
+    })
+  )
+
+  expect(components.length).toBe(0)
+  expect(css(utilities)).toMatchCss(`
+    @variants responsive, focus, hover {
+      .object-fill {
+        object-fit: fill
+      }
+      .object-contain {
+        object-fit: contain
+      }
+      .object-cover {
+        object-fit: cover
+      }
+    }
+    `)
+})
+
+test('plugins apply all global variants when variants are configured globally', () => {
+  const { components, utilities } = processPlugins(
+    [
+      function({ addUtilities, variants }) {
+        addUtilities(
+          {
+            '.object-fill': {
+              'object-fit': 'fill',
+            },
+          },
+          variants('objectFit')
+        )
+        addUtilities(
+          {
+            '.rotate-90deg': {
+              transform: 'rotate(90deg)',
+            },
+          },
+          variants('rotate')
+        )
+      },
+    ],
+    makeConfig({
+      variants: ['responsive', 'focus', 'hover'],
+    })
+  )
+
+  expect(components.length).toBe(0)
+  expect(css(utilities)).toMatchCss(`
+    @variants responsive, focus, hover {
+      .object-fill {
+        object-fit: fill
+      }
+    }
+    @variants responsive, focus, hover {
+      .rotate-90deg {
+        transform: rotate(90deg)
+      }
+    }
+    `)
+})
+
 test('plugins can provide fallbacks to keys missing from the config', () => {
   const { components, utilities } = processPlugins(
     [

src/plugins/alignContent.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.content-center': {
@@ -18,7 +18,7 @@ export default function() {
           'align-content': 'space-around',
         },
       },
-      config('variants.alignContent')
+      variants('alignContent')
     )
   }
 }

src/plugins/alignItems.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.items-start': {
@@ -18,7 +18,7 @@ export default function() {
           'align-items': 'stretch',
         },
       },
-      config('variants.alignItems')
+      variants('alignItems')
     )
   }
 }

src/plugins/alignSelf.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.self-auto': {
@@ -18,7 +18,7 @@ export default function() {
           'align-self': 'stretch',
         },
       },
-      config('variants.alignSelf')
+      variants('alignSelf')
     )
   }
 }

src/plugins/appearance.js

@@ -1,10 +1,10 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.appearance-none': { appearance: 'none' },
       },
-      config('variants.appearance')
+      variants('appearance')
     )
   }
 }

src/plugins/backgroundAttachment.js

@@ -1,12 +1,12 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.bg-fixed': { 'background-attachment': 'fixed' },
         '.bg-local': { 'background-attachment': 'local' },
         '.bg-scroll': { 'background-attachment': 'scroll' },
       },
-      config('variants.backgroundAttachment')
+      variants('backgroundAttachment')
     )
   }
 }

src/plugins/backgroundColor.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => {
         return [
@@ -14,6 +14,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.backgroundColor'))
+    addUtilities(utilities, variants('backgroundColor'))
   }
 }

src/plugins/backgroundPosition.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.backgroundPosition'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.backgroundPosition'))
+    addUtilities(utilities, variants('backgroundPosition'))
   }
 }

src/plugins/backgroundRepeat.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.bg-repeat': { 'background-repeat': 'repeat' },
@@ -7,7 +7,7 @@ export default function() {
         '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
         '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
       },
-      config('variants.backgroundRepeat')
+      variants('backgroundRepeat')
     )
   }
 }

src/plugins/backgroundSize.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.backgroundSize'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.backgroundSize'))
+    addUtilities(utilities, variants('backgroundSize'))
   }
 }

src/plugins/borderCollapse.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.border-collapse': { 'border-collapse': 'collapse' },
         '.border-separate': { 'border-collapse': 'separate' },
       },
-      config('variants.borderCollapse')
+      variants('borderCollapse')
     )
   }
 }

src/plugins/borderColor.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const colors = flattenColorPalette(config('theme.borderColor'))
 
     const utilities = _.fromPairs(
@@ -16,6 +16,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.borderColor'))
+    addUtilities(utilities, variants('borderColor'))
   }
 }

src/plugins/borderRadius.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
@@ -38,6 +38,6 @@ export default function() {
       })
     })
 
-    addUtilities(utilities, config('variants.borderRadius'))
+    addUtilities(utilities, variants('borderRadius'))
   }
 }

src/plugins/borderStyle.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.border-solid': {
@@ -15,7 +15,7 @@ export default function() {
           'border-style': 'none',
         },
       },
-      config('variants.borderStyle')
+      variants('borderStyle')
     )
   }
 }

src/plugins/borderWidth.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
@@ -20,6 +20,6 @@ export default function() {
       })
     })
 
-    addUtilities(utilities, config('variants.borderWidth'))
+    addUtilities(utilities, variants('borderWidth'))
   }
 }

src/plugins/boxShadow.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.boxShadow'), (value, modifier) => {
         const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
@@ -14,6 +14,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.boxShadow'))
+    addUtilities(utilities, variants('boxShadow'))
   }
 }

src/plugins/cursor.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.cursor'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.cursor'))
+    addUtilities(utilities, variants('cursor'))
   }
 }

src/plugins/display.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.block': {
@@ -30,7 +30,7 @@ export default function() {
           display: 'none',
         },
       },
-      config('variants.display')
+      variants('display')
     )
   }
 }

src/plugins/fill.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(flattenColorPalette(config('theme.fill')), (value, modifier) => {
         return [
@@ -14,6 +14,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.fill'))
+    addUtilities(utilities, variants('fill'))
   }
 }

src/plugins/flex.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.flex'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.flex'))
+    addUtilities(utilities, variants('flex'))
   }
 }

src/plugins/flexDirection.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.flex-row': {
@@ -15,7 +15,7 @@ export default function() {
           'flex-direction': 'column-reverse',
         },
       },
-      config('variants.flexDirection')
+      variants('flexDirection')
     )
   }
 }

src/plugins/flexGrow.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     addUtilities(
       _.fromPairs(
         _.map(config('theme.flexGrow'), (value, modifier) => {
@@ -14,7 +14,7 @@ export default function() {
           ]
         })
       ),
-      config('variants.flexGrow')
+      variants('flexGrow')
     )
   }
 }

src/plugins/flexShrink.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     addUtilities(
       _.fromPairs(
         _.map(config('theme.flexShrink'), (value, modifier) => {
@@ -14,7 +14,7 @@ export default function() {
           ]
         })
       ),
-      config('variants.flexShrink')
+      variants('flexShrink')
     )
   }
 }

src/plugins/flexWrap.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.flex-wrap': {
@@ -12,7 +12,7 @@ export default function() {
           'flex-wrap': 'nowrap',
         },
       },
-      config('variants.flexWrap')
+      variants('flexWrap')
     )
   }
 }

src/plugins/float.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.float-right': { float: 'right' },
@@ -11,7 +11,7 @@ export default function() {
           clear: 'both',
         },
       },
-      config('variants.float')
+      variants('float')
     )
   }
 }

src/plugins/fontFamily.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.fontFamily'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.fontFamily'))
+    addUtilities(utilities, variants('fontFamily'))
   }
 }

src/plugins/fontSize.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.fontSize'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.fontSize'))
+    addUtilities(utilities, variants('fontSize'))
   }
 }

src/plugins/fontSmoothing.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.antialiased': {
@@ -11,7 +11,7 @@ export default function() {
           '-moz-osx-font-smoothing': 'auto',
         },
       },
-      config('variants.fontSmoothing')
+      variants('fontSmoothing')
     )
   }
 }

src/plugins/fontStyle.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.italic': { 'font-style': 'italic' },
         '.not-italic': { 'font-style': 'normal' },
       },
-      config('variants.fontStyle')
+      variants('fontStyle')
     )
   }
 }

src/plugins/fontWeight.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.fontWeight'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.fontWeight'))
+    addUtilities(utilities, variants('fontWeight'))
   }
 }

src/plugins/height.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.height'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.height'))
+    addUtilities(utilities, variants('height'))
   }
 }

src/plugins/inset.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`inset-${modifier}`)}`]: {
@@ -27,6 +27,6 @@ export default function() {
       return _.flatMap(config('theme.inset'), generator)
     })
 
-    addUtilities(utilities, config('variants.inset'))
+    addUtilities(utilities, variants('inset'))
   }
 }

src/plugins/justifyContent.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.justify-start': {
@@ -18,7 +18,7 @@ export default function() {
           'justify-content': 'space-around',
         },
       },
-      config('variants.justifyContent')
+      variants('justifyContent')
     )
   }
 }

src/plugins/letterSpacing.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, config, e }) {
+  return function({ addUtilities, config, variants, e }) {
     const utilities = _.fromPairs(
       _.map(config('theme.letterSpacing'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.letterSpacing'))
+    addUtilities(utilities, variants('letterSpacing'))
   }
 }

src/plugins/lineHeight.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.lineHeight'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.lineHeight'))
+    addUtilities(utilities, variants('lineHeight'))
   }
 }

src/plugins/listStylePosition.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.list-inside': { 'list-style-position': 'inside' },
         '.list-outside': { 'list-style-position': 'outside' },
       },
-      config('variants.listStylePosition')
+      variants('listStylePosition')
     )
   }
 }

src/plugins/listStyleType.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.listStyleType'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.listStyleType'))
+    addUtilities(utilities, variants('listStyleType'))
   }
 }

src/plugins/margin.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`m-${modifier}`)}`]: { margin: `${size}` },
@@ -22,6 +22,6 @@ export default function() {
       return _.flatMap(config('theme.margin'), generator)
     })
 
-    addUtilities(utilities, config('variants.margin'))
+    addUtilities(utilities, variants('margin'))
   }
 }

src/plugins/maxHeight.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.maxHeight'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.maxHeight'))
+    addUtilities(utilities, variants('maxHeight'))
   }
 }

src/plugins/maxWidth.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.maxWidth'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.maxWidth'))
+    addUtilities(utilities, variants('maxWidth'))
   }
 }

src/plugins/minHeight.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.minHeight'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.minHeight'))
+    addUtilities(utilities, variants('minHeight'))
   }
 }

src/plugins/minWidth.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.minWidth'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.minWidth'))
+    addUtilities(utilities, variants('minWidth'))
   }
 }

src/plugins/negativeMargin.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`-m-${modifier}`)}`]: { margin: `${size}` },
@@ -24,6 +24,6 @@ export default function() {
       })
     })
 
-    addUtilities(utilities, config('variants.negativeMargin'))
+    addUtilities(utilities, variants('negativeMargin'))
   }
 }

src/plugins/objectFit.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.object-contain': { 'object-fit': 'contain' },
@@ -8,7 +8,7 @@ export default function() {
         '.object-none': { 'object-fit': 'none' },
         '.object-scale-down': { 'object-fit': 'scale-down' },
       },
-      config('variants.objectFit')
+      variants('objectFit')
     )
   }
 }

src/plugins/objectPosition.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.objectPosition'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.objectPosition'))
+    addUtilities(utilities, variants('objectPosition'))
   }
 }

src/plugins/opacity.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.opacity'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.opacity'))
+    addUtilities(utilities, variants('opacity'))
   }
 }

src/plugins/outline.js

@@ -1,10 +1,10 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.outline-none': { outline: '0' },
       },
-      config('variants.outline')
+      variants('outline')
     )
   }
 }

src/plugins/overflow.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.overflow-auto': { overflow: 'auto' },
@@ -17,7 +17,7 @@ export default function() {
         '.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },
         '.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' },
       },
-      config('variants.overflow')
+      variants('overflow')
     )
   }
 }

src/plugins/padding.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`p-${modifier}`)}`]: { padding: `${size}` },
@@ -22,6 +22,6 @@ export default function() {
       return _.flatMap(config('theme.padding'), generator)
     })
 
-    addUtilities(utilities, config('variants.padding'))
+    addUtilities(utilities, variants('padding'))
   }
 }

src/plugins/pointerEvents.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.pointer-events-none': { 'pointer-events': 'none' },
         '.pointer-events-auto': { 'pointer-events': 'auto' },
       },
-      config('variants.pointerEvents')
+      variants('pointerEvents')
     )
   }
 }

src/plugins/position.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.static': { position: 'static' },
@@ -8,7 +8,7 @@ export default function() {
         '.relative': { position: 'relative' },
         '.sticky': { position: 'sticky' },
       },
-      config('variants.position')
+      variants('position')
     )
   }
 }

src/plugins/resize.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.resize-none': { resize: 'none' },
@@ -7,7 +7,7 @@ export default function() {
         '.resize-x': { resize: 'horizontal' },
         '.resize': { resize: 'both' },
       },
-      config('variants.resize')
+      variants('resize')
     )
   }
 }

src/plugins/stroke.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(flattenColorPalette(config('theme.stroke')), (value, modifier) => {
         return [
@@ -14,6 +14,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.stroke'))
+    addUtilities(utilities, variants('stroke'))
   }
 }

src/plugins/tableLayout.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.table-auto': { 'table-layout': 'auto' },
         '.table-fixed': { 'table-layout': 'fixed' },
       },
-      config('variants.tableLayout')
+      variants('tableLayout')
     )
   }
 }

src/plugins/textAlign.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.text-left': { 'text-align': 'left' },
@@ -7,7 +7,7 @@ export default function() {
         '.text-right': { 'text-align': 'right' },
         '.text-justify': { 'text-align': 'justify' },
       },
-      config('variants.textAlign')
+      variants('textAlign')
     )
   }
 }

src/plugins/textColor.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(flattenColorPalette(config('theme.textColor')), (value, modifier) => {
         return [
@@ -14,6 +14,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.textColor'))
+    addUtilities(utilities, variants('textColor'))
   }
 }

src/plugins/textDecoration.js

@@ -1,12 +1,12 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.underline': { 'text-decoration': 'underline' },
         '.line-through': { 'text-decoration': 'line-through' },
         '.no-underline': { 'text-decoration': 'none' },
       },
-      config('variants.textDecoration')
+      variants('textDecoration')
     )
   }
 }

src/plugins/textTransform.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.uppercase': { 'text-transform': 'uppercase' },
@@ -7,7 +7,7 @@ export default function() {
         '.capitalize': { 'text-transform': 'capitalize' },
         '.normal-case': { 'text-transform': 'none' },
       },
-      config('variants.textTransform')
+      variants('textTransform')
     )
   }
 }

src/plugins/userSelect.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.select-none': { 'user-select': 'none' },
         '.select-text': { 'user-select': 'text' },
       },
-      config('variants.userSelect')
+      variants('userSelect')
     )
   }
 }

src/plugins/verticalAlign.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.align-baseline': { 'vertical-align': 'baseline' },
@@ -9,7 +9,7 @@ export default function() {
         '.align-text-top': { 'vertical-align': 'text-top' },
         '.align-text-bottom': { 'vertical-align': 'text-bottom' },
       },
-      config('variants.verticalAlign')
+      variants('verticalAlign')
     )
   }
 }

src/plugins/visibility.js

@@ -1,11 +1,11 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.visible': { visibility: 'visible' },
         '.invisible': { visibility: 'hidden' },
       },
-      config('variants.visibility')
+      variants('visibility')
     )
   }
 }

src/plugins/whitespace.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.whitespace-normal': { 'white-space': 'normal' },
@@ -8,7 +8,7 @@ export default function() {
         '.whitespace-pre-line': { 'white-space': 'pre-line' },
         '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
       },
-      config('variants.whitespace')
+      variants('whitespace')
     )
   }
 }

src/plugins/width.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, config }) {
+  return function({ addUtilities, e, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.width'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.width'))
+    addUtilities(utilities, variants('width'))
   }
 }

src/plugins/wordBreak.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, variants }) {
     addUtilities(
       {
         '.break-normal': {
@@ -15,7 +15,7 @@ export default function() {
           'white-space': 'nowrap',
         },
       },
-      config('variants.wordBreak')
+      variants('wordBreak')
     )
   }
 }

src/plugins/zIndex.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, config }) {
+  return function({ addUtilities, config, variants }) {
     const utilities = _.fromPairs(
       _.map(config('theme.zIndex'), (value, modifier) => {
         return [
@@ -13,6 +13,6 @@ export default function() {
       })
     )
 
-    addUtilities(utilities, config('variants.zIndex'))
+    addUtilities(utilities, variants('zIndex'))
   }
 }

src/util/processPlugins.js

@@ -29,6 +29,13 @@ export default function(plugins, config) {
     plugin({
       postcss,
       config: (path, defaultValue) => _.get(config, path, defaultValue),
+      variants: (path, defaultValue) => {
+        if (_.isArray(config.variants)) {
+          return config.variants
+        }
+
+        return _.get(config.variants, path, defaultValue)
+      },
       e: escapeClassName,
       prefix: applyConfiguredPrefix,
       addUtilities: (utilities, options) => {