Merge pull request #1584 from tailwindcss/stack-divide-utilities

Add `space` and `divide` utilities

src/plugins/divideColor.js

@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const colors = flattenColorPalette(theme('divideColor'))
+
+    const utilities = _.fromPairs(
+      _.map(_.omit(colors, 'default'), (value, modifier) => {
+        return [
+          `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
+          {
+            'border-color': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('divideColor'))
+  }
+}

src/plugins/divideWidth.js

@@ -0,0 +1,24 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const generators = [
+      (value, modifier) => ({
+        [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'border-top-width': `${value}`,
+        },
+        [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'border-left-width': `${value}`,
+        },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(theme('divideWidth'), (value, modifier) => {
+        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+      })
+    })
+
+    addUtilities(utilities, variants('divideWidth'))
+  }
+}

src/plugins/space.js

@@ -0,0 +1,22 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const generators = [
+      (size, modifier) => ({
+        [`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'margin-top': `${size}`,
+        },
+        [`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
+          'margin-left': `${size}`,
+        },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(theme('space'), generator)
+    })
+
+    addUtilities(utilities, variants('space'))
+  }
+}