diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index fb445a83b..2d62ae323 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -597,66 +597,6 @@ test('plugins can create rules with escaped selectors', () => {
     `)
 })
 
-test('plugins can create class names accounting for special naming rules easily', () => {
-  const { components, utilities } = processPlugins(
-    [
-      function({ className, addUtilities }) {
-        addUtilities({
-          [className('rotate', '1/4')]: {
-            transform: 'rotate(90deg)',
-          },
-          [className('rotate', '-1/4')]: {
-            transform: 'rotate(-90deg)',
-          },
-          [className('rotate', 'default')]: {
-            transform: 'rotate(180deg)',
-          },
-        })
-      },
-    ],
-    makeConfig()
-  )
-
-  expect(components.length).toBe(0)
-  expect(css(utilities)).toMatchCss(`
-    @variants {
-      .rotate-1\\/4 {
-        transform: rotate(90deg)
-      }
-      .-rotate-1\\/4 {
-        transform: rotate(-90deg)
-      }
-      .rotate {
-        transform: rotate(180deg)
-      }
-    }
-    `)
-})
-
-test('the second parameter in className is optional', () => {
-  const { components, utilities } = processPlugins(
-    [
-      function({ className, addUtilities }) {
-        addUtilities({
-          [className('rotate')]: {
-            transform: 'rotate(180deg)',
-          },
-        })
-      },
-    ],
-    makeConfig()
-  )
-
-  expect(components.length).toBe(0)
-  expect(css(utilities)).toMatchCss(`
-    @variants {
-      .rotate {
-        transform: rotate(180deg)
-      }
-    }
-    `)
-})
-
 test('plugins can access the current config', () => {
   const { components, utilities } = processPlugins(
     [
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index 586f2a51b..10abc55a4 100644
--- a/src/plugins/inset.js
+++ b/src/plugins/inset.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
+import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, className, theme, variants }) {
+  return function({ addUtilities, e, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [className('inset', modifier)]: {
+        [`.${e(prefixNegativeModifiers('inset', modifier))}`]: {
           top: `${size}`,
           right: `${size}`,
           bottom: `${size}`,
@@ -12,14 +13,20 @@ export default function() {
         },
       }),
       (size, modifier) => ({
-        [className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` },
-        [className('inset-x', modifier)]: { right: `${size}`, left: `${size}` },
+        [`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: {
+          top: `${size}`,
+          bottom: `${size}`,
+        },
+        [`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: {
+          right: `${size}`,
+          left: `${size}`,
+        },
       }),
       (size, modifier) => ({
-        [className('top', modifier)]: { top: `${size}` },
-        [className('right', modifier)]: { right: `${size}` },
-        [className('bottom', modifier)]: { bottom: `${size}` },
-        [className('left', modifier)]: { left: `${size}` },
+        [`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` },
+        [`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` },
+        [`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` },
+        [`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` },
       }),
     ]
 
diff --git a/src/plugins/margin.js b/src/plugins/margin.js
index 65a8f2e23..67399d489 100644
--- a/src/plugins/margin.js
+++ b/src/plugins/margin.js
@@ -1,26 +1,27 @@
 import _ from 'lodash'
+import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, className, theme, variants }) {
+  return function({ addUtilities, e, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [className('m', modifier)]: { margin: `${size}` },
+        [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` },
       }),
       (size, modifier) => ({
-        [className('my', modifier)]: {
+        [`.${e(prefixNegativeModifiers('my', modifier))}`]: {
           'margin-top': `${size}`,
           'margin-bottom': `${size}`,
         },
-        [className('mx', modifier)]: {
+        [`.${e(prefixNegativeModifiers('mx', modifier))}`]: {
           'margin-left': `${size}`,
           'margin-right': `${size}`,
         },
       }),
       (size, modifier) => ({
-        [className('mt', modifier)]: { 'margin-top': `${size}` },
-        [className('mr', modifier)]: { 'margin-right': `${size}` },
-        [className('mb', modifier)]: { 'margin-bottom': `${size}` },
-        [className('ml', modifier)]: { 'margin-left': `${size}` },
+        [`.${e(prefixNegativeModifiers('mt', modifier))}`]: { 'margin-top': `${size}` },
+        [`.${e(prefixNegativeModifiers('mr', modifier))}`]: { 'margin-right': `${size}` },
+        [`.${e(prefixNegativeModifiers('mb', modifier))}`]: { 'margin-bottom': `${size}` },
+        [`.${e(prefixNegativeModifiers('ml', modifier))}`]: { 'margin-left': `${size}` },
       }),
     ]
 
diff --git a/src/util/className.js b/src/util/className.js
deleted file mode 100644
index b91465039..000000000
--- a/src/util/className.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import _ from 'lodash'
-import escapeClassName from './escapeClassName'
-
-export default function className(base, modifier = 'default') {
-  const name = (() => {
-    if (modifier === 'default') {
-      return base
-    }
-    return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
-  })()
-
-  return `.${escapeClassName(name)}`
-}
diff --git a/src/util/prefixNegativeModifiers.js b/src/util/prefixNegativeModifiers.js
new file mode 100644
index 000000000..3b0ab62c2
--- /dev/null
+++ b/src/util/prefixNegativeModifiers.js
@@ -0,0 +1,5 @@
+import _ from 'lodash'
+
+export default function prefixNegativeModifiers(base, modifier) {
+  return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
+}
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index 2d6b0bb4c..a607e8472 100644
--- a/src/util/processPlugins.js
+++ b/src/util/processPlugins.js
@@ -2,7 +2,6 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import Node from 'postcss/lib/node'
 import escapeClassName from '../util/escapeClassName'
-import className from '../util/className'
 import generateVariantFunction from '../util/generateVariantFunction'
 import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
@@ -40,7 +39,6 @@ export default function(plugins, config) {
         return getConfigValue(`variants.${path}`, defaultValue)
       },
       e: escapeClassName,
-      className,
       prefix: applyConfiguredPrefix,
       addUtilities: (utilities, options) => {
         const defaultOptions = { variants: [], respectPrefix: true, respectImportant: true }