diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js
index 1ea2e713d..d10c0b897 100644
--- a/__tests__/plugins/backgroundColor.test.js
+++ b/__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,
diff --git a/__tests__/plugins/borderColor.test.js b/__tests__/plugins/borderColor.test.js
index 0db1d3103..f5c7e7d82 100644
--- a/__tests__/plugins/borderColor.test.js
+++ b/__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,
diff --git a/__tests__/plugins/fill.test.js b/__tests__/plugins/fill.test.js
index 2276e72ef..274cf0a13 100644
--- a/__tests__/plugins/fill.test.js
+++ b/__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,
diff --git a/__tests__/plugins/stroke.test.js b/__tests__/plugins/stroke.test.js
index 81c964885..5df9eb014 100644
--- a/__tests__/plugins/stroke.test.js
+++ b/__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,
diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js
index a3a231a34..709c034c6 100644
--- a/__tests__/plugins/textColor.test.js
+++ b/__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,
diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 8d6d7bde5..2d62ae323 100644
--- a/__tests__/processPlugins.test.js
+++ b/__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(
     [
diff --git a/src/plugins/alignContent.js b/src/plugins/alignContent.js
index 52372d146..9ea3a4937 100644
--- a/src/plugins/alignContent.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/alignItems.js b/src/plugins/alignItems.js
index 8391decc9..737b6e2a5 100644
--- a/src/plugins/alignItems.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/alignSelf.js b/src/plugins/alignSelf.js
index 8d0fadaae..f85099afc 100644
--- a/src/plugins/alignSelf.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/appearance.js b/src/plugins/appearance.js
index bc8eff980..0aba7bc7c 100644
--- a/src/plugins/appearance.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/backgroundAttachment.js b/src/plugins/backgroundAttachment.js
index c85914eb6..5b4d94d8d 100644
--- a/src/plugins/backgroundAttachment.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js
index 5f125336d..32f19c6ab 100644
--- a/src/plugins/backgroundColor.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js
index 530d89801..c39bf439e 100644
--- a/src/plugins/backgroundPosition.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/backgroundRepeat.js b/src/plugins/backgroundRepeat.js
index 0584e05c4..2622a173a 100644
--- a/src/plugins/backgroundRepeat.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js
index 80114e59e..c662e8367 100644
--- a/src/plugins/backgroundSize.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/borderCollapse.js b/src/plugins/borderCollapse.js
index 0c1ab434e..8d115a623 100644
--- a/src/plugins/borderCollapse.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js
index 143963c98..d67649753 100644
--- a/src/plugins/borderColor.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js
index 20b3e2019..a06d2c5c3 100644
--- a/src/plugins/borderRadius.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/borderStyle.js b/src/plugins/borderStyle.js
index 5cb053243..28ae2cb0b 100644
--- a/src/plugins/borderStyle.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js
index becebefa2..c56e69586 100644
--- a/src/plugins/borderWidth.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
index 7d188bc9d..92632580b 100644
--- a/src/plugins/boxShadow.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js
index c932ba2b7..2421852a6 100644
--- a/src/plugins/cursor.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/display.js b/src/plugins/display.js
index 48d627962..54dfff252 100644
--- a/src/plugins/display.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/fill.js b/src/plugins/fill.js
index 6361410dc..9c9ed686a 100644
--- a/src/plugins/fill.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/flex.js b/src/plugins/flex.js
index a951ad9f8..d8c1087a7 100644
--- a/src/plugins/flex.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/flexDirection.js b/src/plugins/flexDirection.js
index 1bbe00a26..f9c4b72ff 100644
--- a/src/plugins/flexDirection.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js
index a33571dd3..f3a004a6a 100644
--- a/src/plugins/flexGrow.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js
index 2dbc7ecbe..bf866dfb6 100644
--- a/src/plugins/flexShrink.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/flexWrap.js b/src/plugins/flexWrap.js
index 45e6783d2..36b6acc08 100644
--- a/src/plugins/flexWrap.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/float.js b/src/plugins/float.js
index 03aed4583..009554b07 100644
--- a/src/plugins/float.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/fontFamily.js b/src/plugins/fontFamily.js
index 49dced1ec..cf10959d3 100644
--- a/src/plugins/fontFamily.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js
index f49bec24a..7a83a554b 100644
--- a/src/plugins/fontSize.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/fontSmoothing.js b/src/plugins/fontSmoothing.js
index 91186056e..36b006cf2 100644
--- a/src/plugins/fontSmoothing.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/fontStyle.js b/src/plugins/fontStyle.js
index 5ff8ccd28..b4e589964 100644
--- a/src/plugins/fontStyle.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/fontWeight.js b/src/plugins/fontWeight.js
index b677f4f52..aaf21c134 100644
--- a/src/plugins/fontWeight.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/height.js b/src/plugins/height.js
index 6f87b9ea1..6e05b6aeb 100644
--- a/src/plugins/height.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index 312119d93..bc75a144b 100644
--- a/src/plugins/inset.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/justifyContent.js b/src/plugins/justifyContent.js
index b6567c17d..6ea864afa 100644
--- a/src/plugins/justifyContent.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js
index d3b08d5f6..d9e248a12 100644
--- a/src/plugins/letterSpacing.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/lineHeight.js b/src/plugins/lineHeight.js
index 1a9b341a4..bbd582adc 100644
--- a/src/plugins/lineHeight.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/listStylePosition.js b/src/plugins/listStylePosition.js
index 230dd9421..abfc68da8 100644
--- a/src/plugins/listStylePosition.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js
index 224a42e34..1deb93f0c 100644
--- a/src/plugins/listStyleType.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/margin.js b/src/plugins/margin.js
index c0ec76bc9..8ba48333e 100644
--- a/src/plugins/margin.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js
index 3d803fdbf..e3d710fef 100644
--- a/src/plugins/maxHeight.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js
index 4aa7b2070..4a765c251 100644
--- a/src/plugins/maxWidth.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js
index 70ae5920b..0b246ebbd 100644
--- a/src/plugins/minHeight.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js
index ff830170c..065c9081c 100644
--- a/src/plugins/minWidth.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/negativeMargin.js b/src/plugins/negativeMargin.js
index 4353c5589..ef8f168f6 100644
--- a/src/plugins/negativeMargin.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/objectFit.js b/src/plugins/objectFit.js
index 883eaf192..0bd4dcb1f 100644
--- a/src/plugins/objectFit.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js
index a52202549..d34bc268d 100644
--- a/src/plugins/objectPosition.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js
index 88051c1a1..c4aa1804d 100644
--- a/src/plugins/opacity.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/outline.js b/src/plugins/outline.js
index 4c6483947..742a17160 100644
--- a/src/plugins/outline.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/overflow.js b/src/plugins/overflow.js
index bbd769836..f10d4187e 100644
--- a/src/plugins/overflow.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/padding.js b/src/plugins/padding.js
index ef8ed7537..ca5eef314 100644
--- a/src/plugins/padding.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/pointerEvents.js b/src/plugins/pointerEvents.js
index c82659b76..9b24208d5 100644
--- a/src/plugins/pointerEvents.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/position.js b/src/plugins/position.js
index 5e031e3a0..2e8d42b72 100644
--- a/src/plugins/position.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/resize.js b/src/plugins/resize.js
index f92477d31..46001b318 100644
--- a/src/plugins/resize.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js
index dd0a37397..a3fe71d39 100644
--- a/src/plugins/stroke.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/tableLayout.js b/src/plugins/tableLayout.js
index 88902937f..17b207ccc 100644
--- a/src/plugins/tableLayout.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/textAlign.js b/src/plugins/textAlign.js
index 81d1f286b..e5f9da998 100644
--- a/src/plugins/textAlign.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js
index 45e84b9eb..9db52320a 100644
--- a/src/plugins/textColor.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/textDecoration.js b/src/plugins/textDecoration.js
index 40a572f2b..2cc27dee6 100644
--- a/src/plugins/textDecoration.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/textTransform.js b/src/plugins/textTransform.js
index a85d87811..eb2bcd055 100644
--- a/src/plugins/textTransform.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/userSelect.js b/src/plugins/userSelect.js
index 771ee5890..fa2ebb11c 100644
--- a/src/plugins/userSelect.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/verticalAlign.js b/src/plugins/verticalAlign.js
index 195aa7d2c..7e1a61081 100644
--- a/src/plugins/verticalAlign.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/visibility.js b/src/plugins/visibility.js
index 063b6c497..4346eb85a 100644
--- a/src/plugins/visibility.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/whitespace.js b/src/plugins/whitespace.js
index b4df70916..f12798ae1 100644
--- a/src/plugins/whitespace.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/width.js b/src/plugins/width.js
index 4ca39dbb8..d4ccba3b5 100644
--- a/src/plugins/width.js
+++ b/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'))
   }
 }
diff --git a/src/plugins/wordBreak.js b/src/plugins/wordBreak.js
index 887c817df..11129a1af 100644
--- a/src/plugins/wordBreak.js
+++ b/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')
     )
   }
 }
diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js
index fdbee879b..7fd0a2096 100644
--- a/src/plugins/zIndex.js
+++ b/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'))
   }
 }
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index f6beac72b..c0804a9c9 100644
--- a/src/util/processPlugins.js
+++ b/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) => {