Add PostCSS text align utilities

dist/tailwind.css

@@ -283,6 +283,22 @@ body {
   letter-spacing: 0.1em;
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
 .bg-light {
   background-color: #ffffff;
 }
@@ -1433,6 +1449,22 @@ body {
     letter-spacing: 0.1em;
   }
 
+  .sm\:text-left {
+    text-align: left;
+  }
+
+  .sm\:text-center {
+    text-align: center;
+  }
+
+  .sm\:text-right {
+    text-align: right;
+  }
+
+  .sm\:text-justify {
+    text-align: justify;
+  }
+
   .sm\:bg-light {
     background-color: #ffffff;
   }
@@ -2584,6 +2616,22 @@ body {
     letter-spacing: 0.1em;
   }
 
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-center {
+    text-align: center;
+  }
+
+  .md\:text-right {
+    text-align: right;
+  }
+
+  .md\:text-justify {
+    text-align: justify;
+  }
+
   .md\:bg-light {
     background-color: #ffffff;
   }
@@ -3735,6 +3783,22 @@ body {
     letter-spacing: 0.1em;
   }
 
+  .lg\:text-left {
+    text-align: left;
+  }
+
+  .lg\:text-center {
+    text-align: center;
+  }
+
+  .lg\:text-right {
+    text-align: right;
+  }
+
+  .lg\:text-justify {
+    text-align: justify;
+  }
+
   .lg\:bg-light {
     background-color: #ffffff;
   }
@@ -4886,6 +4950,22 @@ body {
     letter-spacing: 0.1em;
   }
 
+  .xl\:text-left {
+    text-align: left;
+  }
+
+  .xl\:text-center {
+    text-align: center;
+  }
+
+  .xl\:text-right {
+    text-align: right;
+  }
+
+  .xl\:text-justify {
+    text-align: justify;
+  }
+
   .xl\:bg-light {
     background-color: #ffffff;
   }

src/_less/utilities/text.less

@@ -3,12 +3,6 @@
 
 .define-text-hover-colors(@text-colors; @screens);
 
-// Horizontal alignment
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-justify { text-align: justify; }
-
 // Vertical alignment
 .align-baseline { vertical-align: baseline; }
 .align-top { vertical-align: top; }

src/generators/textAlign.js

@@ -0,0 +1,10 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'text-left': { 'text-align': 'left' },
+    'text-center': { 'text-align': 'center' },
+    'text-right': { 'text-align': 'right' },
+    'text-justify': { 'text-align': 'justify' },
+  })
+}

src/lib/generateUtilities.js

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