Add PostCSS text weight utilities

dist/tailwind.css

@@ -47,6 +47,26 @@ body {
   font-size: 2.875rem;
 }
 
+.text-hairline {
+  font-weight: 200;
+}
+
+.text-thin {
+  font-weight: 300;
+}
+
+.text-regular {
+  font-weight: 400;
+}
+
+.text-medium {
+  font-weight: 600;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
 .bg-light {
   background-color: #ffffff;
 }
@@ -961,6 +981,26 @@ body {
     font-size: 2.875rem;
   }
 
+  .sm\:text-hairline {
+    font-weight: 200;
+  }
+
+  .sm\:text-thin {
+    font-weight: 300;
+  }
+
+  .sm\:text-regular {
+    font-weight: 400;
+  }
+
+  .sm\:text-medium {
+    font-weight: 600;
+  }
+
+  .sm\:text-bold {
+    font-weight: 700;
+  }
+
   .sm\:bg-light {
     background-color: #ffffff;
   }
@@ -1876,6 +1916,26 @@ body {
     font-size: 2.875rem;
   }
 
+  .md\:text-hairline {
+    font-weight: 200;
+  }
+
+  .md\:text-thin {
+    font-weight: 300;
+  }
+
+  .md\:text-regular {
+    font-weight: 400;
+  }
+
+  .md\:text-medium {
+    font-weight: 600;
+  }
+
+  .md\:text-bold {
+    font-weight: 700;
+  }
+
   .md\:bg-light {
     background-color: #ffffff;
   }
@@ -2791,6 +2851,26 @@ body {
     font-size: 2.875rem;
   }
 
+  .lg\:text-hairline {
+    font-weight: 200;
+  }
+
+  .lg\:text-thin {
+    font-weight: 300;
+  }
+
+  .lg\:text-regular {
+    font-weight: 400;
+  }
+
+  .lg\:text-medium {
+    font-weight: 600;
+  }
+
+  .lg\:text-bold {
+    font-weight: 700;
+  }
+
   .lg\:bg-light {
     background-color: #ffffff;
   }
@@ -3706,6 +3786,26 @@ body {
     font-size: 2.875rem;
   }
 
+  .xl\:text-hairline {
+    font-weight: 200;
+  }
+
+  .xl\:text-thin {
+    font-weight: 300;
+  }
+
+  .xl\:text-regular {
+    font-weight: 400;
+  }
+
+  .xl\:text-medium {
+    font-weight: 600;
+  }
+
+  .xl\:text-bold {
+    font-weight: 700;
+  }
+
   .xl\:bg-light {
     background-color: #ffffff;
   }

src/_less/utilities/text.less

@@ -11,21 +11,6 @@
 // Default line height
 @line-height: 1.5;
 
-// Weights
-@font-weight-hairline: 200;
-@font-weight-thin: 300;
-@font-weight-regular: 400;
-@font-weight-medium: 600;
-@font-weight-bold: 700;
-
-@text-weight-scale:
-  'hairline' @font-weight-hairline,
-  'thin'     @font-weight-thin,
-  'regular'  @font-weight-regular,
-  'medium'   @font-weight-medium,
-  'bold'     @font-weight-bold,
-;
-
 // Colors
 @text-light:         @color-white;
 @text-light-soft:    fade(@color-white, 60%);
@@ -109,7 +94,6 @@
   'wide' 0.1em,
 ;
 
-.define-text-weights(@text-weight-scale; @screens);
 .define-text-colors(@text-colors; @screens);
 .define-text-hover-colors(@text-colors; @screens);
 .define-leading-utilities(@leading-scale; @screens);

src/defaultConfig.js

@@ -63,6 +63,13 @@ export default {
       '2xl': '1.75rem', // 28px
       '3xl': '2.375rem', // 38px
       '4xl': '2.875rem', // 46px
+    },
+    weights: {
+      'hairline': 200,
+      'thin': 300,
+      'regular': 400,
+      'medium': 600,
+      'bold': 700,
     }
   },
   backgroundColors: [

src/generators/textWeights.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function ({ text }) {
+  return _.map(text.weights, (weight, modifier) => {
+    return defineClass(`text-${modifier}`, {
+      'font-weight': `${weight}`,
+    })
+  })
+}

src/lib/generateUtilities.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import responsive from '../util/responsive'
 import textSizes from '../generators/textSizes'
+import textWeights from '../generators/textWeights'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundSize from '../generators/backgroundSize'
 import borderWidths from '../generators/borderWidths'
@@ -20,6 +21,7 @@ export default function(options) {
       if (atRule.params === 'utilities') {
         const utilities = _.flatten([
           textSizes(options),
+          textWeights(options),
           backgroundColors(options),
           backgroundSize(options),
           borderWidths(options),