Add stack-x and stack-y utilities

__tests__/fixtures/tailwind-output-important.css

@@ -606,6 +606,158 @@ video {
   }
 }
 
+.stack-y-0 > * + * {
+  margin-top: 0 !important;
+}
+
+.stack-x-0 > * + * {
+  margin-left: 0 !important;
+}
+
+.stack-y-1 > * + * {
+  margin-top: 0.25rem !important;
+}
+
+.stack-x-1 > * + * {
+  margin-left: 0.25rem !important;
+}
+
+.stack-y-2 > * + * {
+  margin-top: 0.5rem !important;
+}
+
+.stack-x-2 > * + * {
+  margin-left: 0.5rem !important;
+}
+
+.stack-y-3 > * + * {
+  margin-top: 0.75rem !important;
+}
+
+.stack-x-3 > * + * {
+  margin-left: 0.75rem !important;
+}
+
+.stack-y-4 > * + * {
+  margin-top: 1rem !important;
+}
+
+.stack-x-4 > * + * {
+  margin-left: 1rem !important;
+}
+
+.stack-y-5 > * + * {
+  margin-top: 1.25rem !important;
+}
+
+.stack-x-5 > * + * {
+  margin-left: 1.25rem !important;
+}
+
+.stack-y-6 > * + * {
+  margin-top: 1.5rem !important;
+}
+
+.stack-x-6 > * + * {
+  margin-left: 1.5rem !important;
+}
+
+.stack-y-8 > * + * {
+  margin-top: 2rem !important;
+}
+
+.stack-x-8 > * + * {
+  margin-left: 2rem !important;
+}
+
+.stack-y-10 > * + * {
+  margin-top: 2.5rem !important;
+}
+
+.stack-x-10 > * + * {
+  margin-left: 2.5rem !important;
+}
+
+.stack-y-12 > * + * {
+  margin-top: 3rem !important;
+}
+
+.stack-x-12 > * + * {
+  margin-left: 3rem !important;
+}
+
+.stack-y-16 > * + * {
+  margin-top: 4rem !important;
+}
+
+.stack-x-16 > * + * {
+  margin-left: 4rem !important;
+}
+
+.stack-y-20 > * + * {
+  margin-top: 5rem !important;
+}
+
+.stack-x-20 > * + * {
+  margin-left: 5rem !important;
+}
+
+.stack-y-24 > * + * {
+  margin-top: 6rem !important;
+}
+
+.stack-x-24 > * + * {
+  margin-left: 6rem !important;
+}
+
+.stack-y-32 > * + * {
+  margin-top: 8rem !important;
+}
+
+.stack-x-32 > * + * {
+  margin-left: 8rem !important;
+}
+
+.stack-y-40 > * + * {
+  margin-top: 10rem !important;
+}
+
+.stack-x-40 > * + * {
+  margin-left: 10rem !important;
+}
+
+.stack-y-48 > * + * {
+  margin-top: 12rem !important;
+}
+
+.stack-x-48 > * + * {
+  margin-left: 12rem !important;
+}
+
+.stack-y-56 > * + * {
+  margin-top: 14rem !important;
+}
+
+.stack-x-56 > * + * {
+  margin-left: 14rem !important;
+}
+
+.stack-y-64 > * + * {
+  margin-top: 16rem !important;
+}
+
+.stack-x-64 > * + * {
+  margin-left: 16rem !important;
+}
+
+.stack-y-px > * + * {
+  margin-top: 1px !important;
+}
+
+.stack-x-px > * + * {
+  margin-left: 1px !important;
+}
+
 .sr-only {
   position: absolute !important;
   width: 1px !important;

__tests__/fixtures/tailwind-output.css

@@ -606,6 +606,158 @@ video {
   }
 }
 
+.stack-y-0 > * + * {
+  margin-top: 0;
+}
+
+.stack-x-0 > * + * {
+  margin-left: 0;
+}
+
+.stack-y-1 > * + * {
+  margin-top: 0.25rem;
+}
+
+.stack-x-1 > * + * {
+  margin-left: 0.25rem;
+}
+
+.stack-y-2 > * + * {
+  margin-top: 0.5rem;
+}
+
+.stack-x-2 > * + * {
+  margin-left: 0.5rem;
+}
+
+.stack-y-3 > * + * {
+  margin-top: 0.75rem;
+}
+
+.stack-x-3 > * + * {
+  margin-left: 0.75rem;
+}
+
+.stack-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.stack-x-4 > * + * {
+  margin-left: 1rem;
+}
+
+.stack-y-5 > * + * {
+  margin-top: 1.25rem;
+}
+
+.stack-x-5 > * + * {
+  margin-left: 1.25rem;
+}
+
+.stack-y-6 > * + * {
+  margin-top: 1.5rem;
+}
+
+.stack-x-6 > * + * {
+  margin-left: 1.5rem;
+}
+
+.stack-y-8 > * + * {
+  margin-top: 2rem;
+}
+
+.stack-x-8 > * + * {
+  margin-left: 2rem;
+}
+
+.stack-y-10 > * + * {
+  margin-top: 2.5rem;
+}
+
+.stack-x-10 > * + * {
+  margin-left: 2.5rem;
+}
+
+.stack-y-12 > * + * {
+  margin-top: 3rem;
+}
+
+.stack-x-12 > * + * {
+  margin-left: 3rem;
+}
+
+.stack-y-16 > * + * {
+  margin-top: 4rem;
+}
+
+.stack-x-16 > * + * {
+  margin-left: 4rem;
+}
+
+.stack-y-20 > * + * {
+  margin-top: 5rem;
+}
+
+.stack-x-20 > * + * {
+  margin-left: 5rem;
+}
+
+.stack-y-24 > * + * {
+  margin-top: 6rem;
+}
+
+.stack-x-24 > * + * {
+  margin-left: 6rem;
+}
+
+.stack-y-32 > * + * {
+  margin-top: 8rem;
+}
+
+.stack-x-32 > * + * {
+  margin-left: 8rem;
+}
+
+.stack-y-40 > * + * {
+  margin-top: 10rem;
+}
+
+.stack-x-40 > * + * {
+  margin-left: 10rem;
+}
+
+.stack-y-48 > * + * {
+  margin-top: 12rem;
+}
+
+.stack-x-48 > * + * {
+  margin-left: 12rem;
+}
+
+.stack-y-56 > * + * {
+  margin-top: 14rem;
+}
+
+.stack-x-56 > * + * {
+  margin-left: 14rem;
+}
+
+.stack-y-64 > * + * {
+  margin-top: 16rem;
+}
+
+.stack-x-64 > * + * {
+  margin-left: 16rem;
+}
+
+.stack-y-px > * + * {
+  margin-top: 1px;
+}
+
+.stack-x-px > * + * {
+  margin-left: 1px;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

__tests__/plugins/stack.test.js

@@ -0,0 +1,44 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/stack'
+
+test('generating stack utilities', () => {
+  const config = {
+    theme: {
+      stack: {
+        '1': '1px',
+        '2': '2px',
+        '4': '4px',
+        '8': '8px',
+      },
+    },
+    variants: {
+      stack: ['responsive'],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      [
+        {
+          '.stack-y-1 > * + *': { 'margin-top': '1px' },
+          '.stack-x-1 > * + *': { 'margin-left': '1px' },
+        },
+        {
+          '.stack-y-2 > * + *': { 'margin-top': '2px' },
+          '.stack-x-2 > * + *': { 'margin-left': '2px' },
+        },
+        {
+          '.stack-y-4 > * + *': { 'margin-top': '4px' },
+          '.stack-x-4 > * + *': { 'margin-left': '4px' },
+        },
+        {
+          '.stack-y-8 > * + *': { 'margin-top': '8px' },
+          '.stack-x-8 > * + *': { 'margin-left': '8px' },
+        },
+      ],
+      ['responsive'],
+    ],
+  ])
+})

src/corePlugins.js

@@ -1,5 +1,6 @@
 import preflight from './plugins/preflight'
 import container from './plugins/container'
+import stack from './plugins/stack'
 import accessibility from './plugins/accessibility'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
@@ -96,6 +97,7 @@ export default function({ corePlugins: corePluginConfig }) {
   return configurePlugins(corePluginConfig, {
     preflight,
     container,
+    stack,
     accessibility,
     appearance,
     backgroundAttachment,

src/plugins/stack.js

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

stubs/defaultConfig.stub.js

@@ -374,6 +374,7 @@ module.exports = {
     },
     padding: theme => theme('spacing'),
     placeholderColor: theme => theme('colors'),
+    stack: theme => theme('spacing'),
     stroke: {
       current: 'currentColor',
     },