Repository: tailwindlabs/tailwindcss

Problem statement:
Add my-auto
Hello. 

Adding "auto" suffix to margin vertical utilites can be usefull with flexbox:

```html
<div class="h-half bg-grey-lighter flex">
    <div class="ml-auto flex flex-col justify-end p-12 text-right">
        <h2 class="my-auto text-5xl font-extrabold uppercase">Centered on rest block</h2>
        <a href="#" class="ml-auto bg-brand text-white w-64 py-3 no-underline text-center font-sans font-medium tracking-wide rounded-xl">Some button text</a>
    </div>
</div>
```

How it's currently looks 
![image](https://user-images.githubusercontent.com/2044754/32375348-1184e85a-c0c3-11e7-8300-a011e59ba607.png)


How I'm expected to be 
![image](https://user-images.githubusercontent.com/2044754/32375374-29b06774-c0c3-11e7-9041-88102d1adb6f.png)




Hints:
This is super interesting and is the first time I've ever seen vertical margins of `auto` do anything at all 😄

I think what we're going to do is add this to the core utility set hardcoded like the horizontal auto variations for now, and then in the next breaking release (`0.2.0`) we'll move all of it out to the config, so you'll just have an `'auto': 'auto'` value in your Tailwind config file under margins.
In the mean time don't forget it's incredibly easy to add these to your own project:

```css
@tailwind preflight;

@responsive {
  .mt-auto { margin-top: auto; }
  .mb-auto { margin-bottom: auto; }
  .my-auto { @apply .mt-auto .mb-auto; }
}

@tailwind utilities;
```

Patch:
diff --git a/src/generators/spacing.js b/src/generators/spacing.js
--- a/src/generators/spacing.js
+++ b/src/generators/spacing.js
@@ -98,9 +98,15 @@ export default function ({ padding, margin, negativeMargin }) {
     definePadding(padding),
     defineMargin(margin),
     defineClasses({
+      'mt-auto': {
+        'margin-top': 'auto',
+      },
       'mr-auto': {
         'margin-right': 'auto',
       },
+      'mb-auto': {
+        'margin-bottom': 'auto',
+      },
       'ml-auto': {
         'margin-left': 'auto',
       },
@@ -108,6 +114,13 @@ export default function ({ padding, margin, negativeMargin }) {
         'margin-left': 'auto',
         'margin-right': 'auto',
       },
+      'my-auto': {
+        'margin-top': 'auto',
+        'margin-bottom': 'auto',
+      },
+      'm-auto': {
+        'margin': 'auto',
+      },
     }),
     defineNegativeMargin(negativeMargin),
   ])


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2982,10 +2982,18 @@ button,
   margin: 1px;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .mr-auto {
   margin-right: auto;
 }
 
+.mb-auto {
+  margin-bottom: auto;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -2995,6 +3003,15 @@ button,
   margin-right: auto;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
 .-mt-0 {
   margin-top: 0;
 }
@@ -5925,10 +5942,18 @@ button,
     margin: 1px;
   }
 
+  .sm\:mt-auto {
+    margin-top: auto;
+  }
+
   .sm\:mr-auto {
     margin-right: auto;
   }
 
+  .sm\:mb-auto {
+    margin-bottom: auto;
+  }
+
   .sm\:ml-auto {
     margin-left: auto;
   }
@@ -5938,6 +5963,15 @@ button,
     margin-right: auto;
   }
 
+  .sm\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .sm\:m-auto {
+    margin: auto;
+  }
+
   .sm\:-mt-0 {
     margin-top: 0;
   }
@@ -8869,10 +8903,18 @@ button,
     margin: 1px;
   }
 
+  .md\:mt-auto {
+    margin-top: auto;
+  }
+
   .md\:mr-auto {
     margin-right: auto;
   }
 
+  .md\:mb-auto {
+    margin-bottom: auto;
+  }
+
   .md\:ml-auto {
     margin-left: auto;
   }
@@ -8882,6 +8924,15 @@ button,
     margin-right: auto;
   }
 
+  .md\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .md\:m-auto {
+    margin: auto;
+  }
+
   .md\:-mt-0 {
     margin-top: 0;
   }
@@ -11813,10 +11864,18 @@ button,
     margin: 1px;
   }
 
+  .lg\:mt-auto {
+    margin-top: auto;
+  }
+
   .lg\:mr-auto {
     margin-right: auto;
   }
 
+  .lg\:mb-auto {
+    margin-bottom: auto;
+  }
+
   .lg\:ml-auto {
     margin-left: auto;
   }
@@ -11826,6 +11885,15 @@ button,
     margin-right: auto;
   }
 
+  .lg\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .lg\:m-auto {
+    margin: auto;
+  }
+
   .lg\:-mt-0 {
     margin-top: 0;
   }
@@ -14757,10 +14825,18 @@ button,
     margin: 1px;
   }
 
+  .xl\:mt-auto {
+    margin-top: auto;
+  }
+
   .xl\:mr-auto {
     margin-right: auto;
   }
 
+  .xl\:mb-auto {
+    margin-bottom: auto;
+  }
+
   .xl\:ml-auto {
     margin-left: auto;
   }
@@ -14770,6 +14846,15 @@ button,
     margin-right: auto;
   }
 
+  .xl\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .xl\:m-auto {
+    margin: auto;
+  }
+
   .xl\:-mt-0 {
     margin-top: 0;
   }