Add PostCSS z-index utilities

dist/tailwind.css

@@ -2445,6 +2445,34 @@ body {
   flex-shrink: 0;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-auto {
+  z-index: auto;
+}
+
 .bar {
   color: blue;
 }
@@ -4888,6 +4916,34 @@ body {
     flex-shrink: 0;
   }
 
+  .sm\:z-0 {
+    z-index: 0;
+  }
+
+  .sm\:z-10 {
+    z-index: 10;
+  }
+
+  .sm\:z-20 {
+    z-index: 20;
+  }
+
+  .sm\:z-30 {
+    z-index: 30;
+  }
+
+  .sm\:z-40 {
+    z-index: 40;
+  }
+
+  .sm\:z-50 {
+    z-index: 50;
+  }
+
+  .sm\:z-auto {
+    z-index: auto;
+  }
+
   .sm\:bar {
     color: blue;
   }
@@ -7332,6 +7388,34 @@ body {
     flex-shrink: 0;
   }
 
+  .md\:z-0 {
+    z-index: 0;
+  }
+
+  .md\:z-10 {
+    z-index: 10;
+  }
+
+  .md\:z-20 {
+    z-index: 20;
+  }
+
+  .md\:z-30 {
+    z-index: 30;
+  }
+
+  .md\:z-40 {
+    z-index: 40;
+  }
+
+  .md\:z-50 {
+    z-index: 50;
+  }
+
+  .md\:z-auto {
+    z-index: auto;
+  }
+
   .md\:bar {
     color: blue;
   }
@@ -9776,6 +9860,34 @@ body {
     flex-shrink: 0;
   }
 
+  .lg\:z-0 {
+    z-index: 0;
+  }
+
+  .lg\:z-10 {
+    z-index: 10;
+  }
+
+  .lg\:z-20 {
+    z-index: 20;
+  }
+
+  .lg\:z-30 {
+    z-index: 30;
+  }
+
+  .lg\:z-40 {
+    z-index: 40;
+  }
+
+  .lg\:z-50 {
+    z-index: 50;
+  }
+
+  .lg\:z-auto {
+    z-index: auto;
+  }
+
   .lg\:bar {
     color: blue;
   }
@@ -12220,6 +12332,34 @@ body {
     flex-shrink: 0;
   }
 
+  .xl\:z-0 {
+    z-index: 0;
+  }
+
+  .xl\:z-10 {
+    z-index: 10;
+  }
+
+  .xl\:z-20 {
+    z-index: 20;
+  }
+
+  .xl\:z-30 {
+    z-index: 30;
+  }
+
+  .xl\:z-40 {
+    z-index: 40;
+  }
+
+  .xl\:z-50 {
+    z-index: 50;
+  }
+
+  .xl\:z-auto {
+    z-index: auto;
+  }
+
   .xl\:bar {
     color: blue;
   }
@@ -12229,4 +12369,4 @@ body {
   }
 }
 
-/*# sourceMappingURL=tailwind.css.map */
+/*# sourceMappingURL=tailwind.css.map */

src/_less/utilities/z-index.less

@@ -1,21 +0,0 @@
-@z-index-1:   10;
-@z-index-2:   20;
-@z-index-3:   30;
-@z-index-4:   40;
-@z-index-5:   50;
-@z-index-6:   60;
-@z-index-7:   70;
-@z-index-8:   80;
-@z-index-9:   90;
-@z-index-10: 100;
-
-.z10  { z-index: @z-index-1; }
-.z20  { z-index: @z-index-2; }
-.z30  { z-index: @z-index-3; }
-.z40  { z-index: @z-index-4; }
-.z50  { z-index: @z-index-5; }
-.z60  { z-index: @z-index-6; }
-.z70  { z-index: @z-index-7; }
-.z80  { z-index: @z-index-8; }
-.z90  { z-index: @z-index-9; }
-.z100 { z-index: @z-index-10; }

src/defaultConfig.js

@@ -329,4 +329,13 @@ export default {
     '4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
     '5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
   },
+  zIndex: {
+    '0': 0,
+    '10': 10,
+    '20': 20,
+    '30': 30,
+    '40': 40,
+    '50': 50,
+    'auto': 'auto',
+  }
 }

src/generators/zIndex.js

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

src/lib/generateUtilities.js

@@ -24,6 +24,7 @@ import spacing from '../generators/spacing'
 import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
+import zIndex from '../generators/zIndex'
 
 export default function(options) {
   return function(css) {
@@ -54,6 +55,7 @@ export default function(options) {
           constrain(options),
           shadows(options),
           flex(options),
+          zIndex(options),
         ])
         css.insertBefore(atRule, responsive(utilities))
         atRule.remove()