Add PostCSS text size utilities

dist/tailwind.css

@@ -15,6 +15,38 @@ body {
   color: red;
 }
 
+.text-xs {
+  font-size: .75rem;
+}
+
+.text-sm {
+  font-size: .875rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.text-2xl {
+  font-size: 1.75rem;
+}
+
+.text-3xl {
+  font-size: 2.375rem;
+}
+
+.text-4xl {
+  font-size: 2.875rem;
+}
+
 .bg-light {
   background-color: #ffffff;
 }
@@ -897,6 +929,38 @@ body {
     color: red;
   }
 
+  .sm\:text-xs {
+    font-size: .75rem;
+  }
+
+  .sm\:text-sm {
+    font-size: .875rem;
+  }
+
+  .sm\:text-base {
+    font-size: 1rem;
+  }
+
+  .sm\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .sm\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .sm\:text-2xl {
+    font-size: 1.75rem;
+  }
+
+  .sm\:text-3xl {
+    font-size: 2.375rem;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.875rem;
+  }
+
   .sm\:bg-light {
     background-color: #ffffff;
   }
@@ -1780,6 +1844,38 @@ body {
     color: red;
   }
 
+  .md\:text-xs {
+    font-size: .75rem;
+  }
+
+  .md\:text-sm {
+    font-size: .875rem;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.75rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 2.375rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.875rem;
+  }
+
   .md\:bg-light {
     background-color: #ffffff;
   }
@@ -2663,6 +2759,38 @@ body {
     color: red;
   }
 
+  .lg\:text-xs {
+    font-size: .75rem;
+  }
+
+  .lg\:text-sm {
+    font-size: .875rem;
+  }
+
+  .lg\:text-base {
+    font-size: 1rem;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.75rem;
+  }
+
+  .lg\:text-3xl {
+    font-size: 2.375rem;
+  }
+
+  .lg\:text-4xl {
+    font-size: 2.875rem;
+  }
+
   .lg\:bg-light {
     background-color: #ffffff;
   }
@@ -3546,6 +3674,38 @@ body {
     color: red;
   }
 
+  .xl\:text-xs {
+    font-size: .75rem;
+  }
+
+  .xl\:text-sm {
+    font-size: .875rem;
+  }
+
+  .xl\:text-base {
+    font-size: 1rem;
+  }
+
+  .xl\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .xl\:text-2xl {
+    font-size: 1.75rem;
+  }
+
+  .xl\:text-3xl {
+    font-size: 2.375rem;
+  }
+
+  .xl\:text-4xl {
+    font-size: 2.875rem;
+  }
+
   .xl\:bg-light {
     background-color: #ffffff;
   }

src/_less/utilities/text.less

@@ -11,27 +11,6 @@
 // Default line height
 @line-height: 1.5;
 
-// Sizes
-@font-size-xs:   (12rem / 16rem); // 12px
-@font-size-sm:   (14rem / 16rem); // 14px
-@font-size-base: (16rem / 16rem); // 16px
-@font-size-lg:   (18rem / 16rem); // 18px
-@font-size-xl:   (20rem / 16rem); // 20px
-@font-size-2xl:  (28rem / 16rem); // 28px
-@font-size-3xl:  (38rem / 16rem); // 38px
-@font-size-4xl:  (46rem / 16rem); // 46px
-
-@text-size-scale:
-  'xs'   @font-size-xs,
-  'sm'   @font-size-sm,
-  'base' @font-size-base,
-  'lg'   @font-size-lg,
-  'xl'   @font-size-xl,
-  '2xl'  @font-size-2xl,
-  '3xl'  @font-size-3xl,
-  '4xl'  @font-size-4xl,
-;
-
 // Weights
 @font-weight-hairline: 200;
 @font-weight-thin: 300;
@@ -130,7 +109,6 @@
   'wide' 0.1em,
 ;
 
-.define-text-sizes(@text-size-scale; @screens);
 .define-text-weights(@text-weight-scale; @screens);
 .define-text-colors(@text-colors; @screens);
 .define-text-hover-colors(@text-colors; @screens);

src/defaultConfig.js

@@ -53,6 +53,18 @@ export default {
     'pink-light': '#ffa5c3',
     'pink-lightest': '#fdf2f5',
   },
+  text: {
+    sizes: {
+      'xs': '.75rem', // 12px
+      'sm': '.875rem', // 14px
+      'base': '1rem', // 16px
+      'lg': '1.125rem', // 18px
+      'xl': '1.25rem', // 20px
+      '2xl': '1.75rem', // 28px
+      '3xl': '2.375rem', // 38px
+      '4xl': '2.875rem', // 46px
+    }
+  },
   backgroundColors: [
     {
       'light': 'white',

src/generators/textSizes.js

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

src/lib/generateUtilities.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import responsive from '../util/responsive'
+import textSizes from '../generators/textSizes'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundSize from '../generators/backgroundSize'
 import borderWidths from '../generators/borderWidths'
@@ -18,6 +19,7 @@ export default function(options) {
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'utilities') {
         const utilities = _.flatten([
+          textSizes(options),
           backgroundColors(options),
           backgroundSize(options),
           borderWidths(options),