Add basic set of opacity utilities

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) {