Add PostCSS tracking/letter-spacing utilities

dist/tailwind.css

@@ -271,6 +271,18 @@ body {
   line-height: 2;
 }
 
+.tracking-tight {
+  letter-spacing: -0.05em;
+}
+
+.tracking-normal {
+  letter-spacing: 0;
+}
+
+.tracking-wide {
+  letter-spacing: 0.1em;
+}
+
 .bg-light {
   background-color: #ffffff;
 }
@@ -1409,6 +1421,18 @@ body {
     line-height: 2;
   }
 
+  .sm\:tracking-tight {
+    letter-spacing: -0.05em;
+  }
+
+  .sm\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .sm\:tracking-wide {
+    letter-spacing: 0.1em;
+  }
+
   .sm\:bg-light {
     background-color: #ffffff;
   }
@@ -2548,6 +2572,18 @@ body {
     line-height: 2;
   }
 
+  .md\:tracking-tight {
+    letter-spacing: -0.05em;
+  }
+
+  .md\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .md\:tracking-wide {
+    letter-spacing: 0.1em;
+  }
+
   .md\:bg-light {
     background-color: #ffffff;
   }
@@ -3687,6 +3723,18 @@ body {
     line-height: 2;
   }
 
+  .lg\:tracking-tight {
+    letter-spacing: -0.05em;
+  }
+
+  .lg\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .lg\:tracking-wide {
+    letter-spacing: 0.1em;
+  }
+
   .lg\:bg-light {
     background-color: #ffffff;
   }
@@ -4826,6 +4874,18 @@ body {
     line-height: 2;
   }
 
+  .xl\:tracking-tight {
+    letter-spacing: -0.05em;
+  }
+
+  .xl\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .xl\:tracking-wide {
+    letter-spacing: 0.1em;
+  }
+
   .xl\:bg-light {
     background-color: #ffffff;
   }

src/_less/utilities/text.less

@@ -1,15 +1,7 @@
 // Default line height
 @line-height: 1.5;
 
-// Letter spacing
-@tracking-scale:
-  'tight' -0.05em,
-  'normal' 0,
-  'wide' 0.1em,
-;
-
 .define-text-hover-colors(@text-colors; @screens);
-.define-tracking-utilities(@tracking-scale; @screens);
 
 // Horizontal alignment
 .text-center { text-align: center; }

src/defaultConfig.js

@@ -82,6 +82,11 @@ export default {
       'normal': 1.5,
       'loose': 2,
     },
+    tracking: {
+      'tight': '-0.05em',
+      'normal': '0',
+      'wide': '0.1em',
+    },
     colors: [
       {
         'light': 'white',

src/generators/textTracking.js

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

src/lib/generateUtilities.js

@@ -5,6 +5,7 @@ import textWeights from '../generators/textWeights'
 import textFonts from '../generators/textFonts'
 import textColors from '../generators/textColors'
 import textLeading from '../generators/textLeading'
+import textTracking from '../generators/textTracking'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundSize from '../generators/backgroundSize'
 import borderWidths from '../generators/borderWidths'
@@ -28,6 +29,7 @@ export default function(options) {
           textFonts(options),
           textColors(options),
           textLeading(options),
+          textTracking(options),
           backgroundColors(options),
           backgroundSize(options),
           borderWidths(options),