Add basic set of opacity utilities

dist/tailwind.css

@@ -2473,6 +2473,26 @@ body {
   z-index: auto;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: .25;
+}
+
+.opacity-50 {
+  opacity: .5;
+}
+
+.opacity-75 {
+  opacity: .75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .bar {
   color: blue;
 }
@@ -4944,6 +4964,26 @@ body {
     z-index: auto;
   }
 
+  .sm\:opacity-0 {
+    opacity: 0;
+  }
+
+  .sm\:opacity-25 {
+    opacity: .25;
+  }
+
+  .sm\:opacity-50 {
+    opacity: .5;
+  }
+
+  .sm\:opacity-75 {
+    opacity: .75;
+  }
+
+  .sm\:opacity-100 {
+    opacity: 1;
+  }
+
   .sm\:bar {
     color: blue;
   }
@@ -7416,6 +7456,26 @@ body {
     z-index: auto;
   }
 
+  .md\:opacity-0 {
+    opacity: 0;
+  }
+
+  .md\:opacity-25 {
+    opacity: .25;
+  }
+
+  .md\:opacity-50 {
+    opacity: .5;
+  }
+
+  .md\:opacity-75 {
+    opacity: .75;
+  }
+
+  .md\:opacity-100 {
+    opacity: 1;
+  }
+
   .md\:bar {
     color: blue;
   }
@@ -9888,6 +9948,26 @@ body {
     z-index: auto;
   }
 
+  .lg\:opacity-0 {
+    opacity: 0;
+  }
+
+  .lg\:opacity-25 {
+    opacity: .25;
+  }
+
+  .lg\:opacity-50 {
+    opacity: .5;
+  }
+
+  .lg\:opacity-75 {
+    opacity: .75;
+  }
+
+  .lg\:opacity-100 {
+    opacity: 1;
+  }
+
   .lg\:bar {
     color: blue;
   }
@@ -12360,6 +12440,26 @@ body {
     z-index: auto;
   }
 
+  .xl\:opacity-0 {
+    opacity: 0;
+  }
+
+  .xl\:opacity-25 {
+    opacity: .25;
+  }
+
+  .xl\:opacity-50 {
+    opacity: .5;
+  }
+
+  .xl\:opacity-75 {
+    opacity: .75;
+  }
+
+  .xl\:opacity-100 {
+    opacity: 1;
+  }
+
   .xl\:bar {
     color: blue;
   }

docs/mix-manifest.json

@@ -1 +1,3 @@
-{}
+{
+    "/source/css/main.css": "/source/css/main.css"
+}

src/defaultConfig.js

@@ -337,5 +337,12 @@ export default {
     '40': 40,
     '50': 50,
     'auto': 'auto',
+  },
+  opacity: {
+    '0': '0',
+    '25': '.25',
+    '50': '.5',
+    '75': '.75',
+    '100': '1',
   }
 }

src/generators/opacity.js

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

src/lib/generateUtilities.js

@@ -25,6 +25,7 @@ import constrain from '../generators/constrain'
 import shadows from '../generators/shadows'
 import flex from '../generators/flex'
 import zIndex from '../generators/zIndex'
+import opacity from '../generators/opacity'
 
 export default function(options) {
   return function(css) {
@@ -56,6 +57,7 @@ export default function(options) {
           shadows(options),
           flex(options),
           zIndex(options),
+          opacity(options),
         ])
         atRule.before(responsive(utilities))
         atRule.remove()

src/util/mergeConfig.js

@@ -36,7 +36,8 @@ const configTemplate = {
   },
   constrain: null,
   shadows: null,
-  zIndex: null
+  zIndex: null,
+  opacity: null,
 }
 
 function replaceDefaults(template, defaults, replacements) {