Merge pull request tailwindlabs#700 from tailwindcss/make-flex-customizable

adamwathan · web-flow · commit 2fd9dc543ed2 · 2019-03-01T13:52:46.000-05:00
Make flex-* utilities customizable
diff --git a/defaultTheme.js b/defaultTheme.js
@@ -316,6 +316,12 @@ module.exports = function() {
     stroke: {
       current: 'currentColor',
     },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
     flexGrow: {
       '0': 0,
       default: 1,
diff --git a/src/plugins/flex.js b/src/plugins/flex.js
@@ -1,21 +1,18 @@
+import _ from 'lodash'
+
 export default function() {
-  return function({ addUtilities, config }) {
-    addUtilities(
-      {
-        '.flex-1': {
-          flex: '1 1 0%',
-        },
-        '.flex-auto': {
-          flex: '1 1 auto',
-        },
-        '.flex-initial': {
-          flex: '0 1 auto',
-        },
-        '.flex-none': {
-          flex: 'none',
-        },
-      },
-      config('variants.flex')
+  return function({ addUtilities, e, config }) {
+    const utilities = _.fromPairs(
+      _.map(config('theme.flex'), (value, modifier) => {
+        return [
+          `.${e(`flex-${modifier}`)}`,
+          {
+            flex: value,
+          },
+        ]
+      })
     )
+
+    addUtilities(utilities, config('variants.flex'))
   }
 }
