diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js
index 446be0981..f7a6ee6c2 100644
--- a/src/defaultPlugins.js
+++ b/src/defaultPlugins.js
@@ -1,3 +1,4 @@
+import opacity from './plugins/opacity'
 import outline from './plugins/outline'
 import overflow from './plugins/overflow'
 import padding from './plugins/padding'
@@ -21,6 +22,7 @@ import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
 export default [
+  opacity(),
   outline(),
   overflow(),
   padding(),
diff --git a/src/generators/opacity.js b/src/generators/opacity.js
deleted file mode 100644
index 31379145a..000000000
--- a/src/generators/opacity.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ opacity }) {
-  return _.map(opacity, (value, modifier) => {
-    return defineClass(`opacity-${modifier}`, {
-      opacity: value,
-    })
-  })
-}
diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js
new file mode 100644
index 000000000..f4dedb7db
--- /dev/null
+++ b/src/plugins/opacity.js
@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('opacity'), (value, modifier) => {
+      return [`.${e(`opacity-${modifier}`)}`, {
+        'opacity': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.opacity'))
+  }
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index d448a6cc9..9065304bd 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -26,7 +26,6 @@ import minWidth from './generators/minWidth'
 import negativeMargin from './generators/negativeMargin'
 import objectFit from './generators/objectFit'
 import objectPosition from './generators/objectPosition'
-import opacity from './generators/opacity'
 
 export default [
   { name: 'lists', generator: lists },
@@ -57,5 +56,4 @@ export default [
   { name: 'negativeMargin', generator: negativeMargin },
   { name: 'objectFit', generator: objectFit },
   { name: 'objectPosition', generator: objectPosition },
-  { name: 'opacity', generator: opacity },
 ]