diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js
index 9df59bdbc..a3bb7e6a4 100644
--- a/src/defaultPlugins.js
+++ b/src/defaultPlugins.js
@@ -1,3 +1,4 @@
+import svgFill from './plugins/svgFill'
 import svgStroke from './plugins/svgStroke'
 import tableLayout from './plugins/tableLayout'
 import textAlign from './plugins/textAlign'
@@ -13,6 +14,7 @@ import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
 export default [
+  svgFill(),
   svgStroke(),
   tableLayout(),
   textAlign(),
diff --git a/src/generators/svgFill.js b/src/generators/svgFill.js
deleted file mode 100644
index d58fb50cd..000000000
--- a/src/generators/svgFill.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ svgFill }) {
-  return _.map(svgFill, (color, modifier) => {
-    return defineClass(`fill-${modifier}`, {
-      fill: color,
-    })
-  })
-}
diff --git a/src/plugins/svgFill.js b/src/plugins/svgFill.js
new file mode 100644
index 000000000..8d4f2ac96
--- /dev/null
+++ b/src/plugins/svgFill.js
@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('svgFill'), (value, modifier) => {
+      return [`.${e(`fill-${modifier}`)}`, {
+        'fill': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.svgFill'))
+  }
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index 5673c8f99..861a5ba15 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -34,7 +34,6 @@ import pointerEvents from './generators/pointerEvents'
 import position from './generators/position'
 import resize from './generators/resize'
 import shadows from './generators/shadows'
-import svgFill from './generators/svgFill'
 
 export default [
   { name: 'lists', generator: lists },
@@ -73,5 +72,4 @@ export default [
   { name: 'position', generator: position },
   { name: 'resize', generator: resize },
   { name: 'shadows', generator: shadows },
-  { name: 'svgFill', generator: svgFill },
 ]