Split flexDirection into its own plugin

defaultConfig.stub.js

@@ -19,6 +19,7 @@ module.exports = {
     borderWidth: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
+    flexDirection: ['responsive'],
     flexbox: ['responsive'],
     float: ['responsive'],
     fontFamily: ['responsive'],

src/corePlugins.js

@@ -13,6 +13,7 @@ import borderStyle from './plugins/borderStyle'
 import borderWidth from './plugins/borderWidth'
 import cursor from './plugins/cursor'
 import display from './plugins/display'
+import flexDirection from './plugins/flexDirection'
 import flexbox from './plugins/flexbox'
 import float from './plugins/float'
 import fontFamily from './plugins/fontFamily'
@@ -87,6 +88,7 @@ export default function(config) {
     borderWidth,
     cursor,
     display,
+    flexDirection,
     flexbox,
     float,
     fontFamily,

src/plugins/flexDirection.js

@@ -0,0 +1,21 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.flex-row': {
+          'flex-direction': 'row',
+        },
+        '.flex-row-reverse': {
+          'flex-direction': 'row-reverse',
+        },
+        '.flex-col': {
+          'flex-direction': 'column',
+        },
+        '.flex-col-reverse': {
+          'flex-direction': 'column-reverse',
+        },
+      },
+      variants
+    )
+  }
+}

src/plugins/flexbox.js

@@ -2,18 +2,6 @@ export default function({ variants }) {
   return function({ addUtilities }) {
     addUtilities(
       {
-        '.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',
         },