Add PostCSS vertical align utilities

dist/tailwind.css

@@ -299,6 +299,30 @@ body {
   text-align: justify;
 }
 
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-text-top {
+  vertical-align: text-top;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .bg-light {
   background-color: #ffffff;
 }
@@ -1465,6 +1489,30 @@ body {
     text-align: justify;
   }
 
+  .sm\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .sm\:align-top {
+    vertical-align: top;
+  }
+
+  .sm\:align-middle {
+    vertical-align: middle;
+  }
+
+  .sm\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .sm\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .sm\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
   .sm\:bg-light {
     background-color: #ffffff;
   }
@@ -2632,6 +2680,30 @@ body {
     text-align: justify;
   }
 
+  .md\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .md\:align-top {
+    vertical-align: top;
+  }
+
+  .md\:align-middle {
+    vertical-align: middle;
+  }
+
+  .md\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .md\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .md\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
   .md\:bg-light {
     background-color: #ffffff;
   }
@@ -3799,6 +3871,30 @@ body {
     text-align: justify;
   }
 
+  .lg\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .lg\:align-top {
+    vertical-align: top;
+  }
+
+  .lg\:align-middle {
+    vertical-align: middle;
+  }
+
+  .lg\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .lg\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .lg\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
   .lg\:bg-light {
     background-color: #ffffff;
   }
@@ -4966,6 +5062,30 @@ body {
     text-align: justify;
   }
 
+  .xl\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .xl\:align-top {
+    vertical-align: top;
+  }
+
+  .xl\:align-middle {
+    vertical-align: middle;
+  }
+
+  .xl\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .xl\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .xl\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
   .xl\:bg-light {
     background-color: #ffffff;
   }

src/_less/utilities/text.less

@@ -3,14 +3,6 @@
 
 .define-text-hover-colors(@text-colors; @screens);
 
-// Vertical alignment
-.align-baseline { vertical-align: baseline; }
-.align-top { vertical-align: top; }
-.align-middle { vertical-align: middle; }
-.align-bottom { vertical-align: bottom; }
-.align-text-top { vertical-align: text-top; }
-.align-text-bottom { vertical-align: text-bottom; }
-
 // Styles
 .text-em { font-style: italic; }
 .text-uppercase { text-transform: uppercase; }

src/generators/verticalAlign.js

@@ -0,0 +1,12 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'align-baseline': { 'vertical-align': 'baseline' },
+    'align-top': { 'vertical-align': 'top' },
+    'align-middle': { 'vertical-align': 'middle' },
+    'align-bottom': { 'vertical-align': 'bottom' },
+    'align-text-top': { 'vertical-align': 'text-top' },
+    'align-text-bottom': { 'vertical-align': 'text-bottom' },
+  })
+}

src/lib/generateUtilities.js

@@ -7,6 +7,7 @@ import textColors from '../generators/textColors'
 import textLeading from '../generators/textLeading'
 import textTracking from '../generators/textTracking'
 import textAlign from '../generators/textAlign'
+import verticalAlign from '../generators/verticalAlign'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundSize from '../generators/backgroundSize'
 import borderWidths from '../generators/borderWidths'
@@ -32,6 +33,7 @@ export default function(options) {
           textLeading(options),
           textTracking(options),
           textAlign(options),
+          verticalAlign(options),
           backgroundColors(options),
           backgroundSize(options),
           borderWidths(options),