diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js
index e18473554..6b179b223 100644
--- a/src/defaultPlugins.js
+++ b/src/defaultPlugins.js
@@ -1,3 +1,4 @@
+import flexbox from './plugins/flexbox'
 import float from './plugins/float'
 import fonts from './plugins/fonts'
 import fontWeights from './plugins/fontWeights'
@@ -36,6 +37,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.flexbox === false ? () => {} : flexbox(),
     config.modules.float === false ? () => {} : float(),
     config.modules.fonts === false ? () => {} : fonts(),
     config.modules.fontWeights === false ? () => {} : fontWeights(),
diff --git a/src/generators/flexbox.js b/src/generators/flexbox.js
deleted file mode 100644
index 30827dc7e..000000000
--- a/src/generators/flexbox.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import defineClasses from '../util/defineClasses'
-
-export default function() {
-  return defineClasses({
-    flex: {
-      display: 'flex',
-    },
-    'inline-flex': {
-      display: 'inline-flex',
-    },
-    'flex-row': {
-      'flex-direction': 'row',
-    },
-    'flex-row-reverse': {
-      'flex-direction': 'row-reverse',
-    },
-    'flex-col': {
-      'flex-direction': 'column',
-    },
-    'flex-col-reverse': {
-      'flex-direction': 'column-reverse',
-    },
-    'flex-wrap': {
-      'flex-wrap': 'wrap',
-    },
-    'flex-wrap-reverse': {
-      'flex-wrap': 'wrap-reverse',
-    },
-    'flex-no-wrap': {
-      'flex-wrap': 'nowrap',
-    },
-    'items-start': {
-      'align-items': 'flex-start',
-    },
-    'items-end': {
-      'align-items': 'flex-end',
-    },
-    'items-center': {
-      'align-items': 'center',
-    },
-    'items-baseline': {
-      'align-items': 'baseline',
-    },
-    'items-stretch': {
-      'align-items': 'stretch',
-    },
-    'self-auto': {
-      'align-self': 'auto',
-    },
-    'self-start': {
-      'align-self': 'flex-start',
-    },
-    'self-end': {
-      'align-self': 'flex-end',
-    },
-    'self-center': {
-      'align-self': 'center',
-    },
-    'self-stretch': {
-      'align-self': 'stretch',
-    },
-    'justify-start': {
-      'justify-content': 'flex-start',
-    },
-    'justify-end': {
-      'justify-content': 'flex-end',
-    },
-    'justify-center': {
-      'justify-content': 'center',
-    },
-    'justify-between': {
-      'justify-content': 'space-between',
-    },
-    'justify-around': {
-      'justify-content': 'space-around',
-    },
-    'content-center': {
-      'align-content': 'center',
-    },
-    'content-start': {
-      'align-content': 'flex-start',
-    },
-    'content-end': {
-      'align-content': 'flex-end',
-    },
-    'content-between': {
-      'align-content': 'space-between',
-    },
-    'content-around': {
-      'align-content': 'space-around',
-    },
-    'flex-1': {
-      flex: '1 1 0%',
-    },
-    'flex-auto': {
-      flex: '1 1 auto',
-    },
-    'flex-initial': {
-      flex: '0 1 auto',
-    },
-    'flex-none': {
-      flex: 'none',
-    },
-    'flex-grow': {
-      'flex-grow': '1',
-    },
-    'flex-shrink': {
-      'flex-shrink': '1',
-    },
-    'flex-no-grow': {
-      'flex-grow': '0',
-    },
-    'flex-no-shrink': {
-      'flex-shrink': '0',
-    },
-  })
-}
diff --git a/src/plugins/flexbox.js b/src/plugins/flexbox.js
new file mode 100644
index 000000000..79f2e8be3
--- /dev/null
+++ b/src/plugins/flexbox.js
@@ -0,0 +1,117 @@
+export default function () {
+  return function ({ addUtilities, config }) {
+    addUtilities({
+      '.flex': {
+        display: 'flex',
+      },
+      '.inline-flex': {
+        display: 'inline-flex',
+      },
+      '.flex-row': {
+        'flex-direction': 'row',
+      },
+      '.flex-row-reverse': {
+        'flex-direction': 'row-reverse',
+      },
+      '.flex-col': {
+        'flex-direction': 'column',
+      },
+      '.flex-col-reverse': {
+        'flex-direction': 'column-reverse',
+      },
+      '.flex-wrap': {
+        'flex-wrap': 'wrap',
+      },
+      '.flex-wrap-reverse': {
+        'flex-wrap': 'wrap-reverse',
+      },
+      '.flex-no-wrap': {
+        'flex-wrap': 'nowrap',
+      },
+      '.items-start': {
+        'align-items': 'flex-start',
+      },
+      '.items-end': {
+        'align-items': 'flex-end',
+      },
+      '.items-center': {
+        'align-items': 'center',
+      },
+      '.items-baseline': {
+        'align-items': 'baseline',
+      },
+      '.items-stretch': {
+        'align-items': 'stretch',
+      },
+      '.self-auto': {
+        'align-self': 'auto',
+      },
+      '.self-start': {
+        'align-self': 'flex-start',
+      },
+      '.self-end': {
+        'align-self': 'flex-end',
+      },
+      '.self-center': {
+        'align-self': 'center',
+      },
+      '.self-stretch': {
+        'align-self': 'stretch',
+      },
+      '.justify-start': {
+        'justify-content': 'flex-start',
+      },
+      '.justify-end': {
+        'justify-content': 'flex-end',
+      },
+      '.justify-center': {
+        'justify-content': 'center',
+      },
+      '.justify-between': {
+        'justify-content': 'space-between',
+      },
+      '.justify-around': {
+        'justify-content': 'space-around',
+      },
+      '.content-center': {
+        'align-content': 'center',
+      },
+      '.content-start': {
+        'align-content': 'flex-start',
+      },
+      '.content-end': {
+        'align-content': 'flex-end',
+      },
+      '.content-between': {
+        'align-content': 'space-between',
+      },
+      '.content-around': {
+        'align-content': 'space-around',
+      },
+      '.flex-1': {
+        flex: '1 1 0%',
+      },
+      '.flex-auto': {
+        flex: '1 1 auto',
+      },
+      '.flex-initial': {
+        flex: '0 1 auto',
+      },
+      '.flex-none': {
+        flex: 'none',
+      },
+      '.flex-grow': {
+        'flex-grow': '1',
+      },
+      '.flex-shrink': {
+        'flex-shrink': '1',
+      },
+      '.flex-no-grow': {
+        'flex-grow': '0',
+      },
+      '.flex-no-shrink': {
+        'flex-shrink': '0',
+      },
+    }, config('modules.flexbox'))
+  }
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index 36ae068c0..1999cdd48 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -12,7 +12,6 @@ import borderStyle from './generators/borderStyle'
 import borderWidths from './generators/borderWidths'
 import cursor from './generators/cursor'
 import display from './generators/display'
-import flexbox from './generators/flexbox'
 
 export default [
   { name: 'lists', generator: lists },
@@ -29,5 +28,4 @@ export default [
   { name: 'borderWidths', generator: borderWidths },
   { name: 'cursor', generator: cursor },
   { name: 'display', generator: display },
-  { name: 'flexbox', generator: flexbox },
 ]