diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
index 04cb3dba9..74d4ff763 100644
--- a/__tests__/containerPlugin.test.js
+++ b/__tests__/containerPlugin.test.js
@@ -7,6 +7,22 @@ function css(nodes) {
   return postcss.root({ nodes }).toString()
 }
 
+function config(overrides) {
+  return _.defaultsDeep(overrides, {
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
+    },
+    options: {
+      prefix: "",
+      important: false,
+      separator: ":"
+    }
+  })
+}
+
 function processPluginsWithValidConfig(config) {
   return processPlugins(
     _.defaultsDeep(config, {
@@ -25,10 +41,8 @@ function processPluginsWithValidConfig(config) {
   )
 }
 
-test('options are not required', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [container()],
-  })
+test.only('options are not required', () => {
+  const { components } = processPlugins([container()], config())
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -47,17 +61,15 @@ test('options are not required', () => {
   `)
 })
 
-test('screens can be specified explicitly', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
-      container({
-        screens: {
-          sm: '400px',
-          lg: '500px',
-        },
-      }),
-    ],
-  })
+test.only('screens can be specified explicitly', () => {
+  const { components } = processPlugins([
+    container({
+      screens: {
+        sm: '400px',
+        lg: '500px',
+      },
+    }),
+  ], config())
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -70,14 +82,12 @@ test('screens can be specified explicitly', () => {
   `)
 })
 
-test('screens can be an array', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
-      container({
-        screens: ['400px', '500px'],
-      }),
-    ],
-  })
+test.only('screens can be an array', () => {
+  const { components } = processPlugins([
+    container({
+      screens: ['400px', '500px'],
+    }),
+  ], config())
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -90,14 +100,12 @@ test('screens can be an array', () => {
   `)
 })
 
-test('the container can be centered by default', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
-      container({
-        center: true,
-      }),
-    ],
-  })
+test.only('the container can be centered by default', () => {
+  const { components } = processPlugins([
+    container({
+      center: true,
+    }),
+  ], config())
 
   expect(css(components)).toMatchCss(`
     .container {
@@ -120,14 +128,12 @@ test('the container can be centered by default', () => {
   `)
 })
 
-test('horizontal padding can be included by default', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
-      container({
-        padding: '2rem',
-      }),
-    ],
-  })
+test.only('horizontal padding can be included by default', () => {
+  const { components } = processPlugins([
+    container({
+      padding: '2rem',
+    }),
+  ], config())
 
   expect(css(components)).toMatchCss(`
     .container {
@@ -150,19 +156,17 @@ test('horizontal padding can be included by default', () => {
   `)
 })
 
-test('setting all options at once', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
-      container({
-        screens: {
-          sm: '400px',
-          lg: '500px',
-        },
-        center: true,
-        padding: '2rem',
-      }),
-    ],
-  })
+test.only('setting all options at once', () => {
+  const { components } = processPlugins([
+    container({
+      screens: {
+        sm: '400px',
+        lg: '500px',
+      },
+      center: true,
+      padding: '2rem',
+    }),
+  ], config())
 
   expect(css(components)).toMatchCss(`
     .container {
diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 3115ad088..300d8ccc8 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -1,41 +1,40 @@
-import _ from 'lodash'
-import postcss from 'postcss'
-import processPlugins from '../src/util/processPlugins'
+import _ from "lodash"
+import postcss from "postcss"
+import processPlugins from "../src/util/processPlugins"
 
 function css(nodes) {
   return postcss.root({ nodes }).toString()
 }
 
-function processPluginsWithValidConfig(config) {
-  return processPlugins(
-    _.defaultsDeep(config, {
-      options: {
-        prefix: '',
-        important: false,
-        separator: ':',
-      },
-    })
-  )
+function config(overrides) {
+  return _.defaultsDeep(overrides, {
+    options: {
+      prefix: "",
+      important: false,
+      separator: ":"
+    }
+  })
 }
 
-test('plugins can create utilities with object syntax', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create utilities with object syntax", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities({
-          '.object-fill': {
-            'object-fit': 'fill',
+          ".object-fill": {
+            "object-fit": "fill"
           },
-          '.object-contain': {
-            'object-fit': 'contain',
-          },
-          '.object-cover': {
-            'object-fit': 'cover',
+          ".object-contain": {
+            "object-fit": "contain"
           },
+          ".object-cover": {
+            "object-fit": "cover"
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -50,33 +49,34 @@ test('plugins can create utilities with object syntax', () => {
         object-fit: cover
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create utilities with arrays of objects', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create utilities with arrays of objects", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities([
           {
-            '.object-fill': {
-              'object-fit': 'fill',
-            },
+            ".object-fill": {
+              "object-fit": "fill"
+            }
           },
           {
-            '.object-contain': {
-              'object-fit': 'contain',
-            },
+            ".object-contain": {
+              "object-fit": "contain"
+            }
           },
           {
-            '.object-cover': {
-              'object-fit': 'cover',
-            },
-          },
+            ".object-cover": {
+              "object-fit": "cover"
+            }
+          }
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -91,36 +91,37 @@ test('plugins can create utilities with arrays of objects', () => {
         object-fit: cover
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create utilities with raw PostCSS nodes', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create utilities with raw PostCSS nodes", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities([
-          postcss.rule({ selector: '.object-fill' }).append([
+          postcss.rule({ selector: ".object-fill" }).append([
             postcss.decl({
-              prop: 'object-fit',
-              value: 'fill',
-            }),
+              prop: "object-fit",
+              value: "fill"
+            })
           ]),
-          postcss.rule({ selector: '.object-contain' }).append([
+          postcss.rule({ selector: ".object-contain" }).append([
             postcss.decl({
-              prop: 'object-fit',
-              value: 'contain',
-            }),
+              prop: "object-fit",
+              value: "contain"
+            })
           ]),
-          postcss.rule({ selector: '.object-cover' }).append([
+          postcss.rule({ selector: ".object-cover" }).append([
             postcss.decl({
-              prop: 'object-fit',
-              value: 'cover',
-            }),
-          ]),
+              prop: "object-fit",
+              value: "cover"
+            })
+          ])
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -135,35 +136,36 @@ test('plugins can create utilities with raw PostCSS nodes', () => {
         object-fit: cover
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create utilities with mixed object styles and PostCSS nodes', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create utilities with mixed object styles and PostCSS nodes", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities([
           {
-            '.object-fill': {
-              objectFit: 'fill',
-            },
+            ".object-fill": {
+              objectFit: "fill"
+            }
           },
-          postcss.rule({ selector: '.object-contain' }).append([
+          postcss.rule({ selector: ".object-contain" }).append([
             postcss.decl({
-              prop: 'object-fit',
-              value: 'contain',
-            }),
+              prop: "object-fit",
+              value: "contain"
+            })
           ]),
-          postcss.rule({ selector: '.object-cover' }).append([
+          postcss.rule({ selector: ".object-cover" }).append([
             postcss.decl({
-              prop: 'object-fit',
-              value: 'cover',
-            }),
-          ]),
+              prop: "object-fit",
+              value: "cover"
+            })
+          ])
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -178,30 +180,31 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes',
         object-fit: cover
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create utilities with variants', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create utilities with variants", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities(
           {
-            '.object-fill': {
-              'object-fit': 'fill',
+            ".object-fill": {
+              "object-fit": "fill"
             },
-            '.object-contain': {
-              'object-fit': 'contain',
-            },
-            '.object-cover': {
-              'object-fit': 'cover',
+            ".object-contain": {
+              "object-fit": "contain"
             },
+            ".object-cover": {
+              "object-fit": "cover"
+            }
           },
-          ['responsive', 'hover', 'group-hover', 'focus']
+          ["responsive", "hover", "group-hover", "focus"]
         )
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -216,27 +219,28 @@ test('plugins can create utilities with variants', () => {
         object-fit: cover
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create components with object syntax', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create components with object syntax", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents({
-          '.btn-blue': {
-            backgroundColor: 'blue',
-            color: 'white',
-            padding: '.5rem 1rem',
-            borderRadius: '.25rem',
-          },
-          '.btn-blue:hover': {
-            backgroundColor: 'darkblue',
+          ".btn-blue": {
+            backgroundColor: "blue",
+            color: "white",
+            padding: ".5rem 1rem",
+            borderRadius: ".25rem"
           },
+          ".btn-blue:hover": {
+            backgroundColor: "darkblue"
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -249,42 +253,43 @@ test('plugins can create components with object syntax', () => {
     .btn-blue:hover {
       background-color: darkblue
     }
-  `)
+    `)
 })
 
-test('plugins can create components with raw PostCSS nodes', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create components with raw PostCSS nodes", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents([
-          postcss.rule({ selector: '.btn-blue' }).append([
+          postcss.rule({ selector: ".btn-blue" }).append([
             postcss.decl({
-              prop: 'background-color',
-              value: 'blue',
+              prop: "background-color",
+              value: "blue"
             }),
             postcss.decl({
-              prop: 'color',
-              value: 'white',
+              prop: "color",
+              value: "white"
             }),
             postcss.decl({
-              prop: 'padding',
-              value: '.5rem 1rem',
+              prop: "padding",
+              value: ".5rem 1rem"
             }),
             postcss.decl({
-              prop: 'border-radius',
-              value: '.25rem',
-            }),
+              prop: "border-radius",
+              value: ".25rem"
+            })
           ]),
-          postcss.rule({ selector: '.btn-blue:hover' }).append([
+          postcss.rule({ selector: ".btn-blue:hover" }).append([
             postcss.decl({
-              prop: 'background-color',
-              value: 'darkblue',
-            }),
-          ]),
+              prop: "background-color",
+              value: "darkblue"
+            })
+          ])
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -297,41 +302,42 @@ test('plugins can create components with raw PostCSS nodes', () => {
     .btn-blue:hover {
       background-color: darkblue
     }
-  `)
+    `)
 })
 
-test('plugins can create components with mixed object styles and raw PostCSS nodes', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create components with mixed object styles and raw PostCSS nodes", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents([
-          postcss.rule({ selector: '.btn-blue' }).append([
+          postcss.rule({ selector: ".btn-blue" }).append([
             postcss.decl({
-              prop: 'background-color',
-              value: 'blue',
+              prop: "background-color",
+              value: "blue"
             }),
             postcss.decl({
-              prop: 'color',
-              value: 'white',
+              prop: "color",
+              value: "white"
             }),
             postcss.decl({
-              prop: 'padding',
-              value: '.5rem 1rem',
+              prop: "padding",
+              value: ".5rem 1rem"
             }),
             postcss.decl({
-              prop: 'border-radius',
-              value: '.25rem',
-            }),
+              prop: "border-radius",
+              value: ".25rem"
+            })
           ]),
           {
-            '.btn-blue:hover': {
-              backgroundColor: 'darkblue',
-            },
-          },
+            ".btn-blue:hover": {
+              backgroundColor: "darkblue"
+            }
+          }
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -344,36 +350,37 @@ test('plugins can create components with mixed object styles and raw PostCSS nod
     .btn-blue:hover {
       background-color: darkblue
     }
-  `)
+    `)
 })
 
-test('plugins can create components with media queries with object syntax', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create components with media queries with object syntax", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents({
-          '.container': {
-            width: '100%',
+          ".container": {
+            width: "100%"
           },
-          '@media (min-width: 100px)': {
-            '.container': {
-              maxWidth: '100px',
-            },
+          "@media (min-width: 100px)": {
+            ".container": {
+              maxWidth: "100px"
+            }
           },
-          '@media (min-width: 200px)': {
-            '.container': {
-              maxWidth: '200px',
-            },
-          },
-          '@media (min-width: 300px)': {
-            '.container': {
-              maxWidth: '300px',
-            },
+          "@media (min-width: 200px)": {
+            ".container": {
+              maxWidth: "200px"
+            }
           },
+          "@media (min-width: 300px)": {
+            ".container": {
+              maxWidth: "300px"
+            }
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -395,39 +402,40 @@ test('plugins can create components with media queries with object syntax', () =
         max-width: 300px
       }
     }
-  `)
+    `)
 })
 
-test('media queries can be defined multiple times using objects-in-array syntax', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("media queries can be defined multiple times using objects-in-array syntax", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents([
           {
-            '.container': {
-              width: '100%',
-            },
-            '@media (min-width: 100px)': {
-              '.container': {
-                maxWidth: '100px',
-              },
+            ".container": {
+              width: "100%"
             },
+            "@media (min-width: 100px)": {
+              ".container": {
+                maxWidth: "100px"
+              }
+            }
           },
           {
-            '.btn': {
-              padding: '1rem .5rem',
-              display: 'block',
+            ".btn": {
+              padding: "1rem .5rem",
+              display: "block"
             },
-            '@media (min-width: 100px)': {
-              '.btn': {
-                display: 'inline-block',
-              },
-            },
-          },
+            "@media (min-width: 100px)": {
+              ".btn": {
+                display: "inline-block"
+              }
+            }
+          }
         ])
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -448,38 +456,39 @@ test('media queries can be defined multiple times using objects-in-array syntax'
         display: inline-block
       }
     }
-  `)
+    `)
 })
 
-test('plugins can create nested rules', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can create nested rules", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents({
-          '.btn-blue': {
-            backgroundColor: 'blue',
-            color: 'white',
-            padding: '.5rem 1rem',
-            borderRadius: '.25rem',
-            '&:hover': {
-              backgroundColor: 'darkblue',
+          ".btn-blue": {
+            backgroundColor: "blue",
+            color: "white",
+            padding: ".5rem 1rem",
+            borderRadius: ".25rem",
+            "&:hover": {
+              backgroundColor: "darkblue"
             },
-            '@media (min-width: 500px)': {
-              '&:hover': {
-                backgroundColor: 'orange',
-              },
+            "@media (min-width: 500px)": {
+              "&:hover": {
+                backgroundColor: "orange"
+              }
             },
-            '> a': {
-              color: 'red',
+            "> a": {
+              color: "red"
             },
-            'h1 &': {
-              color: 'purple',
-            },
-          },
+            "h1 &": {
+              color: "purple"
+            }
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -503,23 +512,22 @@ test('plugins can create nested rules', () => {
     h1 .btn-blue {
       color: purple;
     }
-  `)
+    `)
 })
 
-test('plugins can create rules with escaped selectors', () => {
-  const config = {
-    plugins: [
+test("plugins can create rules with escaped selectors", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ e, addUtilities }) {
         addUtilities({
-          [`.${e('top-1/4')}`]: {
-            top: '25%',
-          },
+          [`.${e("top-1/4")}`]: {
+            top: "25%"
+          }
         })
-      },
+      }
     ],
-  }
-
-  const { components, utilities } = processPluginsWithValidConfig(config)
+    config()
+  )
 
   expect(components.length).toBe(0)
   expect(css(utilities)).toMatchCss(`
@@ -528,41 +536,40 @@ test('plugins can create rules with escaped selectors', () => {
         top: 25%
       }
     }
-  `)
+    `)
 })
 
-test('plugins can access the current config', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    screens: {
-      sm: '576px',
-      md: '768px',
-      lg: '992px',
-      xl: '1200px',
-    },
-    plugins: [
+test("plugins can access the current config", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents, config }) {
         const containerClasses = [
           {
-            '.container': {
-              width: '100%',
-            },
-          },
+            ".container": {
+              width: "100%"
+            }
+          }
         ]
 
-        _.forEach(config('screens'), breakpoint => {
+        _.forEach(config("screens"), breakpoint => {
           containerClasses.push({
             [`@media (min-width: ${breakpoint})`]: {
-              '.container': { maxWidth: breakpoint },
-            },
+              ".container": { maxWidth: breakpoint }
+            }
           })
         })
-
-        // console.log(containerClasses)
-
         addComponents(containerClasses)
-      },
+      }
     ],
-  })
+    config({
+      screens: {
+        sm: "576px",
+        md: "768px",
+        lg: "992px",
+        xl: "1200px"
+      }
+    })
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
@@ -589,90 +596,93 @@ test('plugins can access the current config', () => {
         max-width: 1200px
       }
     }
-  `)
+    `)
 })
 
-test('plugins can provide fallbacks to keys missing from the config', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    borderRadius: {
-      '1': '1px',
-      '2': '2px',
-      '4': '4px',
-      '8': '8px',
-    },
-    plugins: [
+test("plugins can provide fallbacks to keys missing from the config", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addComponents, config }) {
         addComponents({
-          '.btn': {
-            borderRadius: config('borderRadius.default', '.25rem'),
-          },
+          ".btn": {
+            borderRadius: config("borderRadius.default", ".25rem")
+          }
         })
-      },
+      }
     ],
-  })
+    config({
+      borderRadius: {
+        "1": "1px",
+        "2": "2px",
+        "4": "4px",
+        "8": "8px"
+      }
+    })
+  )
 
   expect(utilities.length).toBe(0)
   expect(css(components)).toMatchCss(`
     .btn {
       border-radius: .25rem
     }
-  `)
+    `)
 })
 
-test('variants are optional when adding utilities', () => {
-  const { utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("variants are optional when adding utilities", () => {
+  const { utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities({
-          '.border-collapse': {
-            'border-collapse': 'collapse',
-          },
+          ".border-collapse": {
+            "border-collapse": "collapse"
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
       .border-collapse {
         border-collapse: collapse
       }
-    }
-  `)
+    }`)
 })
 
-test('plugins can add multiple sets of utilities and components', () => {
-  const { components, utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins can add multiple sets of utilities and components", () => {
+  const { components, utilities } = processPlugins(
+    [
       function({ addUtilities, addComponents }) {
         addComponents({
-          '.card': {
-            padding: '1rem',
-            borderRadius: '.25rem',
-          },
+          ".card": {
+            padding: "1rem",
+            borderRadius: ".25rem"
+          }
         })
 
         addUtilities({
-          '.skew-12deg': {
-            transform: 'skewY(-12deg)',
-          },
+          ".skew-12deg": {
+            transform: "skewY(-12deg)"
+          }
         })
 
         addComponents({
-          '.btn': {
-            padding: '1rem .5rem',
-            display: 'inline-block',
-          },
+          ".btn": {
+            padding: "1rem .5rem",
+            display: "inline-block"
+          }
         })
 
         addUtilities({
-          '.border-collapse': {
-            borderCollapse: 'collapse',
-          },
+          ".border-collapse": {
+            borderCollapse: "collapse"
+          }
         })
-      },
+      }
     ],
-  })
+    config()
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
@@ -685,7 +695,7 @@ test('plugins can add multiple sets of utilities and components', () => {
         border-collapse: collapse
       }
     }
-  `)
+    `)
   expect(css(components)).toMatchCss(`
     .card {
       padding: 1rem;
@@ -695,25 +705,27 @@ test('plugins can add multiple sets of utilities and components', () => {
       padding: 1rem .5rem;
       display: inline-block
     }
-  `)
+    `)
 })
 
-test('plugins respect prefix and important options by default when adding utilities', () => {
-  const { utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("plugins respect prefix and important options by default when adding utilities", () => {
+  const { utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities({
-          '.rotate-90': {
-            transform: 'rotate(90deg)',
-          },
+          ".rotate-90": {
+            transform: "rotate(90deg)"
+          }
         })
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-      important: true,
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-",
+        important: true
+      }
+    })
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
@@ -721,128 +733,138 @@ test('plugins respect prefix and important options by default when adding utilit
         transform: rotate(90deg) !important
       }
     }
-  `)
+    `)
 })
 
 test("component declarations respect the 'prefix' option by default", () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+  const { components } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents({
-          '.btn-blue': {
-            backgroundColor: 'blue',
-          },
+          ".btn-blue": {
+            backgroundColor: "blue"
+          }
         })
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-"
+      }
+    })
+  )
 
   expect(css(components)).toMatchCss(`
     .tw-btn-blue {
       background-color: blue
     }
-  `)
+    `)
 })
 
 test("component declarations can optionally ignore 'prefix' option", () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+  const { components } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents(
           {
-            '.btn-blue': {
-              backgroundColor: 'blue',
-            },
+            ".btn-blue": {
+              backgroundColor: "blue"
+            }
           },
           { respectPrefix: false }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-"
+      }
+    })
+  )
 
   expect(css(components)).toMatchCss(`
     .btn-blue {
       background-color: blue
     }
-  `)
+    `)
 })
 
 test("component declarations are not affected by the 'important' option", () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+  const { components } = processPlugins(
+    [
       function({ addComponents }) {
         addComponents({
-          '.btn-blue': {
-            backgroundColor: 'blue',
-          },
+          ".btn-blue": {
+            backgroundColor: "blue"
+          }
         })
-      },
+      }
     ],
-    options: {
-      important: true,
-    },
-  })
+    config({
+      options: {
+        important: true
+      }
+    })
+  )
 
   expect(css(components)).toMatchCss(`
     .btn-blue {
       background-color: blue
     }
-  `)
+    `)
 })
 
 test("plugins can apply the user's chosen prefix to components manually", () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+  const { components } = processPlugins(
+    [
       function({ addComponents, prefix }) {
         addComponents(
           {
-            [prefix('.btn-blue')]: {
-              backgroundColor: 'blue',
-            },
+            [prefix(".btn-blue")]: {
+              backgroundColor: "blue"
+            }
           },
           { respectPrefix: false }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-"
+      }
+    })
+  )
 
   expect(css(components)).toMatchCss(`
     .tw-btn-blue {
       background-color: blue
     }
-  `)
+    `)
 })
 
-test('prefix can optionally be ignored for utilities', () => {
-  const { utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("prefix can optionally be ignored for utilities", () => {
+  const { utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities(
           {
-            '.rotate-90': {
-              transform: 'rotate(90deg)',
-            },
+            ".rotate-90": {
+              transform: "rotate(90deg)"
+            }
           },
           {
-            respectPrefix: false,
+            respectPrefix: false
           }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-      important: true,
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-",
+        important: true
+      }
+    })
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
@@ -850,30 +872,32 @@ test('prefix can optionally be ignored for utilities', () => {
         transform: rotate(90deg) !important
       }
     }
-  `)
+    `)
 })
 
-test('important can optionally be ignored for utilities', () => {
-  const { utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("important can optionally be ignored for utilities", () => {
+  const { utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities(
           {
-            '.rotate-90': {
-              transform: 'rotate(90deg)',
-            },
+            ".rotate-90": {
+              transform: "rotate(90deg)"
+            }
           },
           {
-            respectImportant: false,
+            respectImportant: false
           }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-      important: true,
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-",
+        important: true
+      }
+    })
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
@@ -881,32 +905,34 @@ test('important can optionally be ignored for utilities', () => {
         transform: rotate(90deg)
       }
     }
-  `)
+    `)
 })
 
-test('variants can still be specified when ignoring prefix and important options', () => {
-  const { utilities } = processPluginsWithValidConfig({
-    plugins: [
+test("variants can still be specified when ignoring prefix and important options", () => {
+  const { utilities } = processPlugins(
+    [
       function({ addUtilities }) {
         addUtilities(
           {
-            '.rotate-90': {
-              transform: 'rotate(90deg)',
-            },
+            ".rotate-90": {
+              transform: "rotate(90deg)"
+            }
           },
           {
-            variants: ['responsive', 'hover', 'focus'],
+            variants: ["responsive", "hover", "focus"],
             respectImportant: false,
-            respectPrefix: false,
+            respectPrefix: false
           }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-      important: true,
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-",
+        important: true
+      }
+    })
+  )
 
   expect(css(utilities)).toMatchCss(`
     @variants responsive, hover, focus {
@@ -914,31 +940,33 @@ test('variants can still be specified when ignoring prefix and important options
         transform: rotate(90deg)
       }
     }
-  `)
+    `)
 })
 
-test('prefix will prefix all classes in a selector', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test("prefix will prefix all classes in a selector", () => {
+  const { components } = processPlugins(
+    [
       function({ addComponents, prefix }) {
         addComponents(
           {
-            [prefix('.btn-blue .w-1\\/4 > h1.text-xl + a .bar')]: {
-              backgroundColor: 'blue',
-            },
+            [prefix(".btn-blue .w-1\\/4 > h1.text-xl + a .bar")]: {
+              backgroundColor: "blue"
+            }
           },
           { respectPrefix: false }
         )
-      },
+      }
     ],
-    options: {
-      prefix: 'tw-',
-    },
-  })
+    config({
+      options: {
+        prefix: "tw-"
+      }
+    })
+  )
 
   expect(css(components)).toMatchCss(`
     .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar {
       background-color: blue
     }
-  `)
+    `)
 })
diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index f8a3dec1c..589d10f76 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -4,7 +4,7 @@ import config from '../defaultConfig.stub.js'
 import processPlugins from '../src/util/processPlugins'
 
 function run(input, opts = config) {
-  return postcss([plugin(opts, processPlugins(opts))]).process(input, { from: undefined })
+  return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { from: undefined })
 }
 
 test('it can generate hover variants', () => {
diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js
index 51595f6f0..73dceaa39 100644
--- a/src/processTailwindFeatures.js
+++ b/src/processTailwindFeatures.js
@@ -14,7 +14,7 @@ import processPlugins from './util/processPlugins'
 export default function(getConfig) {
   return function(css) {
     const config = getConfig()
-    const processedPlugins = processPlugins(config)
+    const processedPlugins = processPlugins(config.plugins, config)
     const utilities = generateUtilities(config, processedPlugins.utilities)
 
     return postcss([
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index bc7dd6bdb..07c9d3024 100644
--- a/src/util/processPlugins.js
+++ b/src/util/processPlugins.js
@@ -15,12 +15,12 @@ function parseStyles(styles) {
   return _.flatMap(styles, style => (style instanceof Node ? style : parseObjectStyles(style)))
 }
 
-export default function(config) {
+export default function(plugins, config) {
   const pluginComponents = []
   const pluginUtilities = []
   const pluginVariantGenerators = {}
 
-  config.plugins.forEach(plugin => {
+  plugins.forEach(plugin => {
     plugin({
       config: (path, defaultValue) => _.get(config, path, defaultValue),
       e: escapeClassName,