diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 2762ce033..6f563efb3 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -194,12 +194,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       return getConfigValue(['corePlugins', path], true)
     },
-    variants: (path, defaultValue) => {
-      if (Array.isArray(tailwindConfig.variants)) {
-        return tailwindConfig.variants
-      }
-
-      return getConfigValue(['variants', path], defaultValue)
+    variants: () => {
+      // Preserved for backwards compatibility but not used in v3.0+
+      return []
     },
     addUserCss(userCss) {
       for (let [identifier, rule] of withIdentifiers(userCss)) {
diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js
index 5d03df62f..3fffc390f 100644
--- a/src/util/createUtilityPlugin.js
+++ b/src/util/createUtilityPlugin.js
@@ -15,7 +15,7 @@ export default function createUtilityPlugin(
   { filterDefault = false, resolveArbitraryValue = asValue } = {}
 ) {
   let transformValue = transformThemeValue(themeKey)
-  return function ({ matchUtilities, variants, theme }) {
+  return function ({ matchUtilities, theme }) {
     for (let utilityVariation of utilityVariations) {
       let group = Array.isArray(utilityVariation[0]) ? utilityVariation : [utilityVariation]
 
@@ -38,7 +38,6 @@ export default function createUtilityPlugin(
                 Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
               )
             : theme(themeKey),
-          variants: variants(themeKey),
           type: asMap.get(resolveArbitraryValue) ?? 'any',
         }
       )
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 3fae74266..27132b483 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -6,16 +6,11 @@ import colors from '../../colors'
 import log from './log'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
-import dlv from 'dlv'
 
 function isFunction(input) {
   return typeof input === 'function'
 }
 
-function uniq(input) {
-  return Array.from(new Set(input))
-}
-
 function isObject(input) {
   return typeof input === 'object' && input !== null
 }
@@ -186,90 +181,6 @@ function extractPluginConfigs(configs) {
   return allConfigs
 }
 
-function mergeVariants(variants) {
-  const mergedVariants = variants.reduce((resolved, variants) => {
-    Object.entries(variants || {}).forEach(([plugin, pluginVariants]) => {
-      if (isFunction(pluginVariants)) {
-        resolved[plugin] = pluginVariants({
-          variants(path) {
-            return dlv(resolved, path, [])
-          },
-          before(toInsert, variant, existingPluginVariants = resolved?.[plugin] ?? []) {
-            if (variant === undefined) {
-              return [...toInsert, ...existingPluginVariants]
-            }
-
-            const index = existingPluginVariants.indexOf(variant)
-
-            if (index === -1) {
-              return [...existingPluginVariants, ...toInsert]
-            }
-
-            return [
-              ...existingPluginVariants.slice(0, index),
-              ...toInsert,
-              ...existingPluginVariants.slice(index),
-            ]
-          },
-          after(toInsert, variant, existingPluginVariants = resolved?.[plugin] ?? []) {
-            if (variant === undefined) {
-              return [...existingPluginVariants, ...toInsert]
-            }
-
-            const index = existingPluginVariants.indexOf(variant)
-
-            if (index === -1) {
-              return [...toInsert, ...existingPluginVariants]
-            }
-
-            return [
-              ...existingPluginVariants.slice(0, index + 1),
-              ...toInsert,
-              ...existingPluginVariants.slice(index + 1),
-            ]
-          },
-          without(toRemove, existingPluginVariants = resolved?.[plugin] ?? []) {
-            return existingPluginVariants.filter((v) => !toRemove.includes(v))
-          },
-        })
-      } else {
-        resolved[plugin] = pluginVariants
-      }
-    })
-
-    return resolved
-  }, {})
-
-  return {
-    ...mergedVariants,
-    extend: collectExtends(variants),
-  }
-}
-
-function mergeVariantExtensions({ extend, ...variants }, variantOrder) {
-  return mergeWith(variants, extend, (variantsValue, extensions) => {
-    const merged = uniq([...(variantsValue || []), ...extensions].flat())
-
-    if (extensions.flat().length === 0) {
-      return merged
-    }
-
-    return merged.sort((a, z) => variantOrder.indexOf(a) - variantOrder.indexOf(z))
-  })
-}
-
-function resolveVariants([firstConfig, ...variantConfigs], variantOrder) {
-  // Global variants configuration like `variants: ['hover', 'focus']`
-  if (Array.isArray(firstConfig)) {
-    return firstConfig
-  }
-
-  return mergeVariantExtensions(
-    mergeVariants([firstConfig, ...variantConfigs].reverse()),
-    variantOrder
-  )
-}
-
 function resolveCorePlugins(corePluginConfigs) {
   const result = [...corePluginConfigs].reduceRight((resolved, corePluginConfig) => {
     if (isFunction(corePluginConfig)) {
@@ -299,7 +210,6 @@ export default function resolveConfig(configs) {
       variantOrder: defaultConfig.variantOrder,
     },
   ]
-  let { variantOrder } = allConfigs.find((c) => c.variantOrder)
 
   return normalizeConfig(
     defaults(
@@ -307,10 +217,6 @@ export default function resolveConfig(configs) {
         theme: resolveFunctionKeys(
           mergeExtensions(mergeThemes(allConfigs.map((t) => t?.theme ?? {})))
         ),
-        variants: resolveVariants(
-          allConfigs.map((c) => c?.variants ?? {}),
-          variantOrder
-        ),
         corePlugins: resolveCorePlugins(allConfigs.map((c) => c.corePlugins)),
         plugins: resolvePluginLists(configs.map((c) => c?.plugins ?? [])),
       },
diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js
index 1256ff8b4..4d52cd5f4 100644
--- a/tests/custom-plugins.test.js
+++ b/tests/custom-plugins.test.js
@@ -1217,15 +1217,14 @@ test('plugins can be created using the `createPlugin` function', () => {
     },
     plugins: [
       createPlugin(
-        function ({ addUtilities, theme, variants }) {
+        function ({ addUtilities, theme }) {
           addUtilities(
             Object.fromEntries(
               Object.entries(theme('testPlugin')).map(([k, v]) => [
                 `.test-${k}`,
                 { testProperty: v },
               ])
-            ),
-            variants('testPlugin')
+            )
           )
         },
         {
@@ -1404,9 +1403,6 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked
             lg: '3rem',
           },
         },
-        variants: {
-          testPlugin: ['responsive', 'hover'],
-        },
       }
     }
   )
diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js
index b5b6147ef..dba44d32e 100644
--- a/tests/resolveConfig.test.js
+++ b/tests/resolveConfig.test.js
@@ -15,11 +15,6 @@ test('prefix key overrides default prefix', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -33,11 +28,6 @@ test('prefix key overrides default prefix', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -55,11 +45,6 @@ test('important key overrides default important', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -73,11 +58,6 @@ test('important key overrides default important', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -95,11 +75,6 @@ test('important (selector) key overrides default important', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -113,11 +88,6 @@ test('important (selector) key overrides default important', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -135,11 +105,6 @@ test('separator key overrides default separator', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -153,11 +118,6 @@ test('separator key overrides default separator', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -192,11 +152,6 @@ test('theme key is merged instead of replaced', () => {
         lg: '1000px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -221,11 +176,6 @@ test('theme key is merged instead of replaced', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -278,143 +228,6 @@ test('theme key is deeply merged instead of replaced', () => {
   })
 })
 
-test('variants key is merged instead of replaced', () => {
-  const userConfig = {
-    variants: {
-      backgroundAttachment: [],
-      borderColors: ['responsive', 'hover', 'focus', 'active'],
-    },
-  }
-
-  const defaultConfig = {
-    prefix: '-',
-    important: false,
-    separator: ':',
-    theme: {
-      colors: {
-        'grey-darker': '#606f7b',
-        'grey-dark': '#8795a1',
-        grey: '#b8c2cc',
-        'grey-light': '#dae1e7',
-        'grey-lighter': '#f1f5f8',
-      },
-      fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
-        serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
-      },
-      screens: {
-        sm: '500px',
-        md: '750px',
-        lg: '1000px',
-      },
-    },
-    variants: {
-      appearance: ['responsive'],
-      backgroundAttachment: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-      borderRadius: ['responsive'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    prefix: '-',
-    important: false,
-    separator: ':',
-    theme: {
-      colors: {
-        'grey-darker': '#606f7b',
-        'grey-dark': '#8795a1',
-        grey: '#b8c2cc',
-        'grey-light': '#dae1e7',
-        'grey-lighter': '#f1f5f8',
-      },
-      fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
-        serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
-      },
-      screens: {
-        sm: '500px',
-        md: '750px',
-        lg: '1000px',
-      },
-    },
-    variants: {
-      appearance: ['responsive'],
-      backgroundAttachment: [],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus', 'active'],
-      borderRadius: ['responsive'],
-    },
-  })
-})
-
-test('a global variants list replaces the default', () => {
-  const userConfig = {
-    variants: ['responsive', 'hover', 'focus', 'active'],
-  }
-
-  const defaultConfig = {
-    prefix: '-',
-    important: false,
-    separator: ':',
-    theme: {
-      colors: {
-        'grey-darker': '#606f7b',
-        'grey-dark': '#8795a1',
-        grey: '#b8c2cc',
-        'grey-light': '#dae1e7',
-        'grey-lighter': '#f1f5f8',
-      },
-      fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
-        serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
-      },
-      screens: {
-        sm: '500px',
-        md: '750px',
-        lg: '1000px',
-      },
-    },
-    variants: {
-      appearance: ['responsive'],
-      backgroundAttachment: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-      borderRadius: ['responsive'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    prefix: '-',
-    important: false,
-    separator: ':',
-    theme: {
-      colors: {
-        'grey-darker': '#606f7b',
-        'grey-dark': '#8795a1',
-        grey: '#b8c2cc',
-        'grey-light': '#dae1e7',
-        'grey-lighter': '#f1f5f8',
-      },
-      fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
-        serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
-      },
-      screens: {
-        sm: '500px',
-        md: '750px',
-        lg: '1000px',
-      },
-    },
-    variants: ['responsive', 'hover', 'focus', 'active'],
-  })
-})
-
 test('missing top level keys are pulled from the default config', () => {
   const userConfig = {}
 
@@ -428,11 +241,6 @@ test('missing top level keys are pulled from the default config', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -447,11 +255,6 @@ test('missing top level keys are pulled from the default config', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -479,10 +282,6 @@ test('functions in the default theme section are lazily evaluated', () => {
       backgroundColors: (theme) => theme('colors'),
       textColors: (theme) => theme('colors'),
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      textColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -508,10 +307,6 @@ test('functions in the default theme section are lazily evaluated', () => {
         blue: 'blue',
       },
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      textColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -547,10 +342,6 @@ test('functions in the user theme section are lazily evaluated', () => {
       backgroundColors: ({ colors }) => colors,
       textColors: ({ colors }) => colors,
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      textColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -578,10 +369,6 @@ test('functions in the user theme section are lazily evaluated', () => {
         customText: '#facade',
       },
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      textColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -617,10 +404,6 @@ test('theme values in the extend section extend the existing theme', () => {
       },
       backgroundColors: (theme) => theme('colors'),
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      opacity: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -649,10 +432,6 @@ test('theme values in the extend section extend the existing theme', () => {
         customBackground: '#bada55',
       },
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-      opacity: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -700,11 +479,6 @@ test('theme values in the extend section extend the user theme', () => {
         4: '1rem',
       },
     },
-    variants: {
-      opacity: ['responsive', 'hover', 'focus'],
-      height: ['responsive'],
-      width: ['responsive'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -738,11 +512,6 @@ test('theme values in the extend section extend the user theme', () => {
         4: '1rem',
       },
     },
-    variants: {
-      opacity: ['responsive', 'hover', 'focus'],
-      height: ['responsive'],
-      width: ['responsive'],
-    },
   })
 })
 
@@ -774,9 +543,6 @@ test('theme values in the extend section can extend values that are depended on
       },
       backgroundColors: (theme) => theme('colors'),
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -804,9 +570,6 @@ test('theme values in the extend section can extend values that are depended on
         customBackground: '#bada55',
       },
     },
-    variants: {
-      backgroundColors: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -832,9 +595,6 @@ test('theme values in the extend section are not deeply merged when they are sim
         mono: ['Menlo', 'Courier New', 'monospace'],
       },
     },
-    variants: {
-      fonts: ['responsive'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -850,9 +610,6 @@ test('theme values in the extend section are not deeply merged when they are sim
         mono: ['Menlo', 'Courier New', 'monospace'],
       },
     },
-    variants: {
-      fonts: ['responsive'],
-    },
   })
 })
 
@@ -892,7 +649,6 @@ test('theme values in the extend section are deeply merged, when they are arrays
         },
       },
     },
-    variants: {},
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -922,7 +678,6 @@ test('theme values in the extend section are deeply merged, when they are arrays
         },
       },
     },
-    variants: {},
   })
 })
 
@@ -952,9 +707,6 @@ test('the theme function can use a default value if the key is missing', () => {
         ...theme('colors'),
       }),
     },
-    variants: {
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -976,9 +728,6 @@ test('the theme function can use a default value if the key is missing', () => {
         blue: 'blue',
       },
     },
-    variants: {
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -1008,10 +757,6 @@ test('the theme function can resolve function values', () => {
         blue: 'blue',
       },
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1047,10 +792,6 @@ test('the theme function can resolve function values', () => {
         blue: 'blue',
       },
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -1076,10 +817,6 @@ test('the theme function can resolve deep function values', () => {
         '1/3': '33.33333%',
       }),
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1100,10 +837,6 @@ test('the theme function can resolve deep function values', () => {
         '1/3': '33.33333%',
       },
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -1142,9 +875,6 @@ test('theme values in the extend section are lazily evaluated', () => {
         ...theme('colors'),
       }),
     },
-    variants: {
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1170,9 +900,6 @@ test('theme values in the extend section are lazily evaluated', () => {
         blue: 'blue',
       },
     },
-    variants: {
-      borderColor: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -1209,7 +936,6 @@ test('lazily evaluated values have access to the config utils', () => {
         ...negative(theme('spacing')),
       }),
     },
-    variants: {},
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1266,7 +992,6 @@ test('lazily evaluated values have access to the config utils', () => {
         4: '4px',
       },
     },
-    variants: {},
   })
 })
 
@@ -1279,9 +1004,6 @@ test('the original theme is not mutated', () => {
         },
       },
     },
-    variants: {
-      borderColor: ['responsive', 'hover'],
-    },
   }
 
   const defaultConfig = {
@@ -1295,9 +1017,6 @@ test('the original theme is not mutated', () => {
         yellow: 'yellow',
       },
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   resolveConfig([userConfig, defaultConfig])
@@ -1310,9 +1029,6 @@ test('the original theme is not mutated', () => {
         },
       },
     },
-    variants: {
-      borderColor: ['responsive', 'hover'],
-    },
   })
 })
 
@@ -1343,7 +1059,6 @@ test('custom properties are multiplied by -1 for negative values', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1460,9 +1175,6 @@ test('more than two config objects can be resolved', () => {
       },
       backgroundColor: (theme) => theme('colors'),
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([firstConfig, secondConfig, thirdConfig, defaultConfig])
@@ -1503,9 +1215,6 @@ test('more than two config objects can be resolved', () => {
         lime: 'lime',
       },
     },
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-    },
   })
 })
 
@@ -1529,11 +1238,6 @@ test('plugin config modifications are applied', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1547,11 +1251,6 @@ test('plugin config modifications are applied', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
@@ -1577,11 +1276,6 @@ test('user config takes precedence over plugin config modifications', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1595,11 +1289,6 @@ test('user config takes precedence over plugin config modifications', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
@@ -1637,11 +1326,6 @@ test('plugin config can register plugins that also have config', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1655,11 +1339,6 @@ test('plugin config can register plugins that also have config', () => {
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
@@ -1692,11 +1371,6 @@ test('plugin configs take precedence over plugin configs registered by that plug
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1710,11 +1384,6 @@ test('plugin configs take precedence over plugin configs registered by that plug
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
@@ -1757,11 +1426,6 @@ test('plugin theme extensions are added even if user overrides top-level theme c
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1780,11 +1444,6 @@ test('plugin theme extensions are added even if user overrides top-level theme c
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
@@ -1828,11 +1487,6 @@ test('user theme extensions take precedence over plugin theme extensions with th
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -1852,56 +1506,10 @@ test('user theme extensions take precedence over plugin theme extensions with th
         mobile: '400px',
       },
     },
-    variants: {
-      appearance: ['responsive'],
-      borderCollapse: [],
-      borderColors: ['responsive', 'hover', 'focus'],
-    },
     plugins: userConfig.plugins,
   })
 })
 
-test('variants can be extended', () => {
-  const userConfig = {
-    variants: {
-      borderColor: ({ after }) => after(['group-focus'], 'hover'),
-      extend: {
-        backgroundColor: ['active', 'disabled', 'group-hover'],
-      },
-    },
-  }
-
-  const otherConfig = {
-    variants: {
-      extend: {
-        textColor: ['hover', 'focus-within'],
-      },
-    },
-  }
-
-  const defaultConfig = {
-    prefix: '',
-    important: false,
-    separator: ':',
-    theme: {},
-    variants: {
-      borderColor: ['hover', 'focus'],
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      textColor: ['responsive', 'focus'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, otherConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    variants: {
-      borderColor: ['hover', 'group-focus', 'focus'],
-      backgroundColor: ['responsive', 'group-hover', 'hover', 'focus', 'active', 'disabled'],
-      textColor: ['responsive', 'focus-within', 'hover', 'focus'],
-    },
-  })
-})
-
 test('extensions are applied in the right order', () => {
   const userConfig = {
     theme: {
@@ -1966,153 +1574,6 @@ test('extensions are applied in the right order', () => {
   })
 })
 
-test('variant sort order can be customized', () => {
-  const userConfig = {
-    variantOrder: [
-      'disabled',
-      'focus',
-      'group-hover',
-      'focus-within',
-      'active',
-      'hover',
-      'responsive',
-    ],
-    variants: {
-      borderColor: ({ after }) => after(['group-focus'], 'hover'),
-      extend: {
-        backgroundColor: ['active', 'disabled', 'group-hover'],
-      },
-    },
-  }
-
-  const otherConfig = {
-    variants: {
-      extend: {
-        textColor: ['hover', 'focus-within'],
-      },
-    },
-  }
-
-  const defaultConfig = {
-    prefix: '',
-    important: false,
-    separator: ':',
-    theme: {},
-    variants: {
-      borderColor: ['hover', 'focus'],
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      textColor: ['responsive', 'focus'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, otherConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    variants: {
-      borderColor: ['hover', 'group-focus', 'focus'],
-      backgroundColor: ['disabled', 'focus', 'group-hover', 'active', 'hover', 'responsive'],
-      textColor: ['focus', 'focus-within', 'hover', 'responsive'],
-    },
-  })
-})
-
-test('custom variants go to the beginning by default when sort is applied', () => {
-  const userConfig = {
-    variants: {
-      extend: {
-        backgroundColor: ['active', 'custom-variant-1', 'group-hover', 'custom-variant-2'],
-      },
-    },
-  }
-
-  const defaultConfig = {
-    prefix: '',
-    important: false,
-    separator: ':',
-    theme: {},
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    variants: {
-      backgroundColor: [
-        'responsive',
-        'custom-variant-1',
-        'custom-variant-2',
-        'group-hover',
-        'hover',
-        'focus',
-        'active',
-      ],
-    },
-  })
-})
-
-test('variants can be defined as a function', () => {
-  const userConfig = {
-    variants: {
-      backgroundColor: ({ variants }) => [...variants('backgroundColor'), 'disabled'],
-      padding: ({ before }) => before(['active']),
-      float: ({ before }) => before(['disabled'], 'focus'),
-      margin: ({ before }) => before(['hover'], 'focus'),
-      borderWidth: ({ after }) => after(['active']),
-      backgroundImage: ({ after }) => after(['disabled'], 'hover'),
-      opacity: ({ after }) => after(['hover'], 'focus'),
-      rotate: ({ without }) => without(['hover']),
-      cursor: ({ before, after, without }) =>
-        without(['responsive'], before(['checked'], 'hover', after(['hover'], 'focus'))),
-    },
-  }
-
-  const otherConfig = {
-    variants: {
-      backgroundColor: ({ variants }) => [...variants('backgroundColor'), 'active'],
-    },
-  }
-
-  const defaultConfig = {
-    prefix: '',
-    important: false,
-    separator: ':',
-    theme: {},
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus'],
-      padding: ['responsive', 'focus'],
-      float: ['responsive', 'hover', 'focus'],
-      margin: ['responsive'],
-      borderWidth: ['responsive', 'focus'],
-      backgroundImage: ['responsive', 'hover', 'focus'],
-      opacity: ['responsive'],
-      rotate: ['responsive', 'hover', 'focus'],
-      cursor: ['responsive', 'focus'],
-    },
-  }
-
-  const result = resolveConfig([userConfig, otherConfig, defaultConfig])
-
-  expect(result).toMatchObject({
-    prefix: '',
-    important: false,
-    separator: ':',
-    theme: {},
-    variants: {
-      backgroundColor: ['responsive', 'hover', 'focus', 'active', 'disabled'],
-      padding: ['active', 'responsive', 'focus'],
-      float: ['responsive', 'hover', 'disabled', 'focus'],
-      margin: ['responsive', 'hover'],
-      borderWidth: ['responsive', 'focus', 'active'],
-      backgroundImage: ['responsive', 'hover', 'disabled', 'focus'],
-      opacity: ['hover', 'responsive'],
-      rotate: ['responsive', 'focus'],
-      cursor: ['focus', 'checked', 'hover'],
-    },
-  })
-})
-
 test('core plugin configuration builds on the default list when starting with an empty object', () => {
   const userConfig = {
     corePlugins: { display: false },
@@ -2123,7 +1584,6 @@ test('core plugin configuration builds on the default list when starting with an
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     corePlugins: {},
   }
 
@@ -2134,7 +1594,6 @@ test('core plugin configuration builds on the default list when starting with an
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     corePlugins: corePluginList.filter((c) => c !== 'display'),
   })
 })
@@ -2150,7 +1609,6 @@ test('core plugins that are disabled by default can be enabled', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     corePlugins: { display: false },
   }
 
@@ -2174,7 +1632,6 @@ test('core plugin configurations stack', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     corePlugins: ['float', 'display', 'padding'],
   }
 
@@ -2185,7 +1642,6 @@ test('core plugin configurations stack', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     corePlugins: ['float', 'padding', 'margin'],
   })
 })
@@ -2205,7 +1661,6 @@ test('plugins are merged', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
   }
 
   const result = resolveConfig([userConfig, otherConfig, defaultConfig])
@@ -2215,7 +1670,6 @@ test('plugins are merged', () => {
     important: false,
     separator: ':',
     theme: {},
-    variants: {},
     plugins: ['1', '2', '3'],
   })
 })
@@ -2253,7 +1707,6 @@ test('all helpers can be destructured from the first function argument', () => {
         4: '4px',
       },
     },
-    variants: {},
   }
 
   const result = resolveConfig([userConfig, defaultConfig])
@@ -2275,6 +1728,5 @@ test('all helpers can be destructured from the first function argument', () => {
         'screen-md': '768px',
       },
     },
-    variants: {},
   })
 })
diff --git a/tests/util/invokePlugin.js b/tests/util/invokePlugin.js
deleted file mode 100644
index 226d64702..000000000
--- a/tests/util/invokePlugin.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import dlv from 'dlv'
-import escapeClassName from '../src/util/escapeClassName'
-
-export default function (plugin, config) {
-  const addedUtilities = []
-
-  const getConfigValue = (path, defaultValue) => dlv(config, path, defaultValue)
-  const pluginApi = {
-    config: getConfigValue,
-    e: escapeClassName,
-    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
-    variants: (path, defaultValue) => {
-      if (Array.isArray(config.variants)) {
-        return config.variants
-      }
-
-      return getConfigValue(`variants.${path}`, defaultValue)
-    },
-    addUtilities(utilities, variants) {
-      addedUtilities.push([utilities, variants])
-    },
-    corePlugins(corePlugin) {
-      if (config.corePlugins === undefined) {
-        return false
-      }
-
-      if (Array.isArray(config.corePlugins)) {
-        return config.corePlugins.includes(corePlugin)
-      }
-
-      return config.corePlugins[corePlugin] !== false
-    },
-  }
-
-  plugin(pluginApi)
-
-  return {
-    utilities: addedUtilities.map(([utilities, variants]) => [
-      Object.assign({}, ...(Array.isArray(utilities) ? utilities : [utilities])),
-      variants,
-    ]),
-  }
-}
diff --git a/tests/util/produce.js b/tests/util/produce.js
deleted file mode 100644
index 1949a1add..000000000
--- a/tests/util/produce.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// Full credit goes to: https://github.com/purplestone/exhaust
-// However, it is modified so that it is a bit more modern
-export function produce(blueprint) {
-  let groups = []
-
-  // Call the blueprint once so that we can collect all the possible values we
-  // spit out in the callback function.
-  blueprint((...args) => {
-    if (args.length <= 0) throw new Error('Blueprint callback must have at least a single value')
-    groups.push(args)
-  })
-
-  // Calculate how many combinations there are
-  let iterations = groups.reduce((total, current) => total * current.length, 1)
-
-  // Calculate all the combinations possible
-  let zippedGroups = []
-  let currentIteration = iterations
-  groups.forEach((a) => {
-    let n = a.length
-    currentIteration = currentIteration / n
-    let iS = -1
-    let aS = []
-
-    for (let i = 0; i < iterations; i++) {
-      if (!(i % currentIteration)) iS++
-      aS.push(a[iS % n])
-    }
-    zippedGroups.push(aS)
-  })
-
-  // Transpose the matrix, so that we can get the correct rows/columns structure
-  // again.
-  zippedGroups = zippedGroups[0].map((_, i) => zippedGroups.map((o) => o[i]))
-
-  // Call the blueprint again, but now give the inner function a single value
-  // every time so that we can build up the final result with single values.
-  return zippedGroups.map((group) => {
-    let i = 0
-    return blueprint(() => group[i++])
-  })
-}