Repository: tailwindlabs/tailwindcss
Pull request #2580 (2020-10-16 16:15:32)

Change special keyword 'default' to 'DEFAULT', make negative prefixes work across all plugins
This PR aims to simplify how utility class names are generated in Tailwind in order to make things much more consistent and predictable.

This is a breaking change and slated for v2.0.

---

Currently in Tailwind, several core plugins support a special `default` key in the config which tells Tailwind to generate a utility with _no_ suffix:

```js
module.exports = {
  theme: {
    boxShadow: {
      default: '0 0 5px black'
      // Generates `shadow`, not `shadow-default`
    }
  }
}
```

This is useful but confusing, because many other plugins _don't_ support this, for example:

```js
module.exports = {
  theme: {
    cursor: {
      default: 'default'
      // Generates `cursor-default`, not `cursor`
    }
  }
}
```

Similarly, many plugins support generating classes that are prefixed with `-` by adding `-` to the beginning of the key name:

```js
module.exports = {
  theme: {
    margin: {
      '-5': '-5px'
      // Generates `-m-5`, not `m--5`
    }
  }
}
```

...but others don't:

```js
module.exports = {
  theme: {
     backgroundPosition: {
      '-top-10': 'top -10px',
      // Generates `bg--top-10`, not `-bg-top-10`
    }
  }
}
```

This is confusing and makes the codebase complicated. The problem is, for some plugins we really do need to be able to include "default" in the utility name, like `cursor-default`.

So this PR replaces all usage of the lowercase `default` with the uppercase `DEFAULT`. The uppercase `DEFAULT` always means "with no suffix", and lowercase is just a regular string with no special meaning.

```diff
  module.exports = {
    theme: {
      boxShadow: {
-       default: '0 0 5px black'
+       DEFAULT: '0 0 5px black'
      }
    }
  }
```

This PR also makes things consistent so that `DEFAULT` can be used _anywhere for any plugin_, and so can the `-` prefix. This lets you make really stupid classes like `-font-sans` but that's your decision.

I've also updated the use of "default" in variants. We allow you to control the position of the default variant by adding "default" to your variants list:

```js
// Old syntax
module.exports = {
  variants: {
     backgroundPosition: ['hover', 'default', 'focus']
  }
}
```

This has been replaced with `DEFAULT` as well, so that things are consistent.

```js
// New syntax
module.exports = {
  variants: {
     backgroundPosition: ['hover', 'DEFAULT', 'focus']
  }
}
```

The last place this has been updated is when customizing the per-screen-size padding of the container:

```js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  }
}
```

Updating for this change isn't too painful (just replace `default` with `DEFAULT` everywhere in your config where you want no suffix, and stuff like `theme('borderRadius.default')` with `theme('borderRadius.DEFAULT')` in your CSS) but is slightly annoying admittedly. I'm sorry.


Patch:
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 3f3b91c7..39b5ac70 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -19,11 +19,11 @@ function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
 }
 
 function ensureIncludesDefault(variants) {
-  return variants.includes('default') ? variants : ['default', ...variants]
+  return variants.includes('DEFAULT') ? variants : ['DEFAULT', ...variants]
 }
 
 const defaultVariantGenerators = config => ({
-  default: generateVariantFunction(() => {}),
+  DEFAULT: generateVariantFunction(() => {}),
   'motion-safe': generateVariantFunction(
     ({ container, separator, modifySelectors }) => {
       const modified = modifySelectors(({ selector }) => {
diff --git a/src/plugins/animation.js b/src/plugins/animation.js
index 28732d8a..b6c821f1 100644
--- a/src/plugins/animation.js
+++ b/src/plugins/animation.js
@@ -1,7 +1,8 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const keyframesConfig = theme('keyframes')
     const keyframesStyles = _.fromPairs(
       _.toPairs(keyframesConfig).map(([name, keyframes]) => {
@@ -14,7 +15,7 @@ export default function() {
     const utilities = _.fromPairs(
       _.toPairs(animationConfig).map(([suffix, animation]) => {
         return [
-          `.${e(`animate-${suffix}`)}`,
+          nameClass('animate', suffix),
           {
             animation,
           },
diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js
index 581cda8b..e7a90c18 100644
--- a/src/plugins/backgroundColor.js
+++ b/src/plugins/backgroundColor.js
@@ -2,9 +2,10 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 import toColorValue from '../util/toColorValue'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('backgroundColor'))
 
     const getProperties = value => {
@@ -21,7 +22,7 @@ export default function() {
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`bg-${modifier}`)}`, getProperties(value)]
+        return [nameClass('bg', modifier), getProperties(value)]
       })
     )
 
diff --git a/src/plugins/backgroundImage.js b/src/plugins/backgroundImage.js
index 149d687e..df3a20ef 100644
--- a/src/plugins/backgroundImage.js
+++ b/src/plugins/backgroundImage.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundImage'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-image': value,
           },
diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js
index 88c2e5d8..7fa254f7 100644
--- a/src/plugins/backgroundPosition.js
+++ b/src/plugins/backgroundPosition.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundPosition'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-position': value,
           },
diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js
index a03f90a5..abac1472 100644
--- a/src/plugins/backgroundSize.js
+++ b/src/plugins/backgroundSize.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundSize'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-size': value,
           },
diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js
index 40204c8d..29ffe5b4 100644
--- a/src/plugins/borderColor.js
+++ b/src/plugins/borderColor.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('borderColor'))
 
     const getProperties = value => {
@@ -20,8 +21,8 @@ export default function() {
     }
 
     const utilities = _.fromPairs(
-      _.map(_.omit(colors, 'default'), (value, modifier) => {
-        return [`.${e(`border-${modifier}`)}`, getProperties(value)]
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
+        return [nameClass('border', modifier), getProperties(value)]
       })
     )
 
diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js
index e491d30f..af610222 100644
--- a/src/plugins/borderRadius.js
+++ b/src/plugins/borderRadius.js
@@ -1,40 +1,41 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (value, modifier) => ({
-        [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
+        [nameClass('rounded', modifier)]: { borderRadius: `${value}` },
       }),
       (value, modifier) => ({
-        [`.${e(`rounded-t${modifier}`)}`]: {
+        [nameClass('rounded-t', modifier)]: {
           borderTopLeftRadius: `${value}`,
           borderTopRightRadius: `${value}`,
         },
-        [`.${e(`rounded-r${modifier}`)}`]: {
+        [nameClass('rounded-r', modifier)]: {
           borderTopRightRadius: `${value}`,
           borderBottomRightRadius: `${value}`,
         },
-        [`.${e(`rounded-b${modifier}`)}`]: {
+        [nameClass('rounded-b', modifier)]: {
           borderBottomRightRadius: `${value}`,
           borderBottomLeftRadius: `${value}`,
         },
-        [`.${e(`rounded-l${modifier}`)}`]: {
+        [nameClass('rounded-l', modifier)]: {
           borderTopLeftRadius: `${value}`,
           borderBottomLeftRadius: `${value}`,
         },
       }),
       (value, modifier) => ({
-        [`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` },
-        [`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` },
-        [`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` },
-        [`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` },
+        [nameClass('rounded-tl', modifier)]: { borderTopLeftRadius: `${value}` },
+        [nameClass('rounded-tr', modifier)]: { borderTopRightRadius: `${value}` },
+        [nameClass('rounded-br', modifier)]: { borderBottomRightRadius: `${value}` },
+        [nameClass('rounded-bl', modifier)]: { borderBottomLeftRadius: `${value}` },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
       return _.flatMap(theme('borderRadius'), (value, modifier) => {
-        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        return generator(value, modifier)
       })
     })
 
diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js
index d84fb440..33592f2b 100644
--- a/src/plugins/borderWidth.js
+++ b/src/plugins/borderWidth.js
@@ -1,22 +1,23 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (value, modifier) => ({
-        [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
+        [nameClass('border', modifier)]: { borderWidth: `${value}` },
       }),
       (value, modifier) => ({
-        [`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` },
-        [`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` },
-        [`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` },
-        [`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` },
+        [nameClass('border-t', modifier)]: { borderTopWidth: `${value}` },
+        [nameClass('border-r', modifier)]: { borderRightWidth: `${value}` },
+        [nameClass('border-b', modifier)]: { borderBottomWidth: `${value}` },
+        [nameClass('border-l', modifier)]: { borderLeftWidth: `${value}` },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
       return _.flatMap(theme('borderWidth'), (value, modifier) => {
-        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        return generator(value, modifier)
       })
     })
 
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
index 00059728..6cf6953b 100644
--- a/src/plugins/boxShadow.js
+++ b/src/plugins/boxShadow.js
@@ -1,14 +1,12 @@
 import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('boxShadow'), (value, modifier) => {
-        const className =
-          modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
         return [
-          `.${className}`,
+          nameClass('shadow', modifier),
           {
             'box-shadow': value,
           },
diff --git a/src/plugins/container.js b/src/plugins/container.js
index ff1ff415..6f6529fd 100644
--- a/src/plugins/container.js
+++ b/src/plugins/container.js
@@ -30,7 +30,7 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) {
   if (!_.isObject(paddings)) {
     return [
       {
-        screen: 'default',
+        screen: 'DEFAULT',
         minWidth: 0,
         padding: paddings,
       },
@@ -39,11 +39,11 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) {
 
   const mapping = []
 
-  if (paddings.default) {
+  if (paddings.DEFAULT) {
     mapping.push({
-      screen: 'default',
+      screen: 'DEFAULT',
       minWidth: 0,
-      padding: paddings.default,
+      padding: paddings.DEFAULT,
     })
   }
 
diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css
index 7f5c3534..511a692b 100644
--- a/src/plugins/css/preflight.css
+++ b/src/plugins/css/preflight.css
@@ -99,7 +99,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: theme('borderColor.default', currentColor); /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 /*
diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js
index a0006dc6..99acc948 100644
--- a/src/plugins/cursor.js
+++ b/src/plugins/cursor.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('cursor'), (value, modifier) => {
         return [
-          `.${e(`cursor-${modifier}`)}`,
+          nameClass('cursor', modifier),
           {
             cursor: value,
           },
diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js
index 75df3789..2fe9e9fc 100644
--- a/src/plugins/divideColor.js
+++ b/src/plugins/divideColor.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('divideColor'))
 
     const getProperties = value => {
@@ -20,9 +21,9 @@ export default function() {
     }
 
     const utilities = _.fromPairs(
-      _.map(_.omit(colors, 'default'), (value, modifier) => {
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
         return [
-          `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
+          `${nameClass('divide', modifier)} > :not(template) ~ :not(template)`,
           getProperties(value),
         ]
       })
diff --git a/src/plugins/divideOpacity.js b/src/plugins/divideOpacity.js
index 06dc5e08..44404157 100644
--- a/src/plugins/divideOpacity.js
+++ b/src/plugins/divideOpacity.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('divideOpacity'), (value, modifier) => {
         return [
-          `.${e(`divide-opacity-${modifier}`)} > :not(template) ~ :not(template)`,
+          `${nameClass('divide-opacity', modifier)} > :not(template) ~ :not(template)`,
           {
             '--divide-opacity': value,
           },
diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
index 44757d8e..f3a6b04d 100644
--- a/src/plugins/divideWidth.js
+++ b/src/plugins/divideWidth.js
@@ -1,17 +1,18 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
+        [`${nameClass('divide-y', modifier)} > :not(template) ~ :not(template)`]: {
           '--divide-y-reverse': '0',
           'border-top-width': `calc(${
             size === '0' ? '0px' : size
           } * calc(1 - var(--divide-y-reverse)))`,
           'border-bottom-width': `calc(${size === '0' ? '0px' : size} * var(--divide-y-reverse))`,
         },
-        [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
+        [`${nameClass('divide-x', modifier)} > :not(template) ~ :not(template)`]: {
           '--divide-x-reverse': '0',
           'border-right-width': `calc(${size === '0' ? '0px' : size} * var(--divide-x-reverse))`,
           'border-left-width': `calc(${
@@ -24,7 +25,7 @@ export default function() {
     const utilities = _.flatMap(generators, generator => {
       return [
         ..._.flatMap(theme('divideWidth'), (value, modifier) => {
-          return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+          return generator(value, modifier)
         }),
         {
           '.divide-y-reverse > :not(template) ~ :not(template)': {
diff --git a/src/plugins/fill.js b/src/plugins/fill.js
index 84bd170c..28ab2ad6 100644
--- a/src/plugins/fill.js
+++ b/src/plugins/fill.js
@@ -1,14 +1,15 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('fill'))
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`fill-${modifier}`)}`, { fill: toColorValue(value) }]
+        return [nameClass('fill', modifier), { fill: toColorValue(value) }]
       })
     )
 
diff --git a/src/plugins/flex.js b/src/plugins/flex.js
index 0f637dad..246b291f 100644
--- a/src/plugins/flex.js
+++ b/src/plugins/flex.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('flex'), (value, modifier) => {
         return [
-          `.${e(`flex-${modifier}`)}`,
+          nameClass('flex', modifier),
           {
             flex: value,
           },
diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js
index ae9e0492..2891033b 100644
--- a/src/plugins/flexGrow.js
+++ b/src/plugins/flexGrow.js
@@ -1,13 +1,13 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     addUtilities(
       _.fromPairs(
         _.map(theme('flexGrow'), (value, modifier) => {
-          const className = modifier === 'default' ? 'flex-grow' : `flex-grow-${modifier}`
           return [
-            `.${e(className)}`,
+            nameClass('flex-grow', modifier),
             {
               'flex-grow': value,
             },
diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js
index 073836d2..fad53d17 100644
--- a/src/plugins/flexShrink.js
+++ b/src/plugins/flexShrink.js
@@ -1,13 +1,13 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     addUtilities(
       _.fromPairs(
         _.map(theme('flexShrink'), (value, modifier) => {
-          const className = modifier === 'default' ? 'flex-shrink' : `flex-shrink-${modifier}`
           return [
-            `.${e(className)}`,
+            nameClass('flex-shrink', modifier),
             {
               'flex-shrink': value,
             },
diff --git a/src/plugins/fontFamily.js b/src/plugins/fontFamily.js
index b682984d..7ed6538c 100644
--- a/src/plugins/fontFamily.js
+++ b/src/plugins/fontFamily.js
@@ -1,18 +1,13 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('fontFamily'), (value, modifier) => {
-        return [
-          `.${e(`font-${modifier}`)}`,
-          {
-            'font-family': Array.isArray(value) ? value.join(', ') : value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('fontFamily'))
-  }
+  return createUtilityPlugin('fontFamily', [
+    [
+      'font',
+      ['fontFamily'],
+      value => {
+        return Array.isArray(value) ? value.join(', ') : value
+      },
+    ],
+  ])
 }
diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js
index e5667db5..018be523 100644
--- a/src/plugins/fontSize.js
+++ b/src/plugins/fontSize.js
@@ -1,7 +1,8 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('fontSize'), (value, modifier) => {
         const [fontSize, options] = Array.isArray(value) ? value : [value]
@@ -12,7 +13,7 @@ export default function() {
             }
 
         return [
-          `.${e(`text-${modifier}`)}`,
+          nameClass('text', modifier),
           {
             'font-size': fontSize,
             ...(lineHeight === undefined
diff --git a/src/plugins/fontWeight.js b/src/plugins/fontWeight.js
index 3cc80ebd..1d96bc39 100644
--- a/src/plugins/fontWeight.js
+++ b/src/plugins/fontWeight.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('fontWeight'), (value, modifier) => {
-        return [
-          `.${e(`font-${modifier}`)}`,
-          {
-            'font-weight': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('fontWeight'))
-  }
+  return createUtilityPlugin('fontWeight', [['font', ['fontWeight']]])
 }
diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
index 50b09e8a..988c168c 100644
--- a/src/plugins/gradientColorStops.js
+++ b/src/plugins/gradientColorStops.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import { toRgba } from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('gradientColorStops'))
 
     const utilities = _(colors)
@@ -24,21 +25,21 @@ export default function() {
 
         return [
           [
-            `.${e(`from-${modifier}`)}`,
+            nameClass('from', modifier),
             {
               '--gradient-from-color': toColorValue(value, 'from'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
-            `.${e(`via-${modifier}`)}`,
+            nameClass('via', modifier),
             {
               '--gradient-via-color': toColorValue(value, 'via'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
-            `.${e(`to-${modifier}`)}`,
+            nameClass('to', modifier),
             {
               '--gradient-to-color': toColorValue(value, 'to'),
             },
diff --git a/src/plugins/height.js b/src/plugins/height.js
index bf7da12b..e124fbc4 100644
--- a/src/plugins/height.js
+++ b/src/plugins/height.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('height'), (value, modifier) => {
-        return [
-          `.${e(`h-${modifier}`)}`,
-          {
-            height: value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('height'))
-  }
+  return createUtilityPlugin('height', [['h', ['height']]])
 }
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index 10abc55a..7117da49 100644
--- a/src/plugins/inset.js
+++ b/src/plugins/inset.js
@@ -1,11 +1,11 @@
 import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('inset', modifier))}`]: {
+        [nameClass('inset', modifier)]: {
           top: `${size}`,
           right: `${size}`,
           bottom: `${size}`,
@@ -13,20 +13,20 @@ export default function() {
         },
       }),
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: {
+        [nameClass('inset-y', modifier)]: {
           top: `${size}`,
           bottom: `${size}`,
         },
-        [`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: {
+        [nameClass('inset-x', modifier)]: {
           right: `${size}`,
           left: `${size}`,
         },
       }),
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` },
-        [`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` },
-        [`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` },
-        [`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` },
+        [nameClass('top', modifier)]: { top: `${size}` },
+        [nameClass('right', modifier)]: { right: `${size}` },
+        [nameClass('bottom', modifier)]: { bottom: `${size}` },
+        [nameClass('left', modifier)]: { left: `${size}` },
       }),
     ]
 
diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js
index bdcd2e5b..4c4e698c 100644
--- a/src/plugins/letterSpacing.js
+++ b/src/plugins/letterSpacing.js
@@ -1,19 +1,5 @@
-import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, theme, variants, e }) {
-    const utilities = _.fromPairs(
-      _.map(theme('letterSpacing'), (value, modifier) => {
-        return [
-          `.${e(prefixNegativeModifiers('tracking', modifier))}`,
-          {
-            'letter-spacing': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('letterSpacing'))
-  }
+  return createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]])
 }
diff --git a/src/plugins/lineHeight.js b/src/plugins/lineHeight.js
index ac9d4fc5..89b565ec 100644
--- a/src/plugins/lineHeight.js
+++ b/src/plugins/lineHeight.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('lineHeight'), (value, modifier) => {
-        return [
-          `.${e(`leading-${modifier}`)}`,
-          {
-            'line-height': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('lineHeight'))
-  }
+  return createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]])
 }
diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js
index 4caa59c8..15ce86a5 100644
--- a/src/plugins/listStyleType.js
+++ b/src/plugins/listStyleType.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('listStyleType'), (value, modifier) => {
-        return [
-          `.${e(`list-${modifier}`)}`,
-          {
-            'list-style-type': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('listStyleType'))
-  }
+  return createUtilityPlugin('listStyleType', [['list', ['listStyleType']]])
 }
diff --git a/src/plugins/margin.js b/src/plugins/margin.js
index 67399d48..08945b2c 100644
--- a/src/plugins/margin.js
+++ b/src/plugins/margin.js
@@ -1,27 +1,27 @@
 import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` },
+        [nameClass('m', modifier)]: { margin: `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('my', modifier))}`]: {
+        [nameClass('my', modifier)]: {
           'margin-top': `${size}`,
           'margin-bottom': `${size}`,
         },
-        [`.${e(prefixNegativeModifiers('mx', modifier))}`]: {
+        [nameClass('mx', modifier)]: {
           'margin-left': `${size}`,
           'margin-right': `${size}`,
         },
       }),
       (size, modifier) => ({
-        [`.${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}` },
+        [nameClass('mt', modifier)]: { 'margin-top': `${size}` },
+        [nameClass('mr', modifier)]: { 'margin-right': `${size}` },
+        [nameClass('mb', modifier)]: { 'margin-bottom': `${size}` },
+        [nameClass('ml', modifier)]: { 'margin-left': `${size}` },
       }),
     ]
 
diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js
index 0c2a199f..2d6b469c 100644
--- a/src/plugins/maxHeight.js
+++ b/src/plugins/maxHeight.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('maxHeight'), (value, modifier) => {
-        return [
-          `.${e(`max-h-${modifier}`)}`,
-          {
-            'max-height': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('maxHeight'))
-  }
+  return createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]])
 }
diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js
index b893fe3e..162ce7a4 100644
--- a/src/plugins/maxWidth.js
+++ b/src/plugins/maxWidth.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('maxWidth'), (value, modifier) => {
-        return [
-          `.${e(`max-w-${modifier}`)}`,
-          {
-            'max-width': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('maxWidth'))
-  }
+  return createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]])
 }
diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js
index 5f42806a..37993059 100644
--- a/src/plugins/minHeight.js
+++ b/src/plugins/minHeight.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('minHeight'), (value, modifier) => {
-        return [
-          `.${e(`min-h-${modifier}`)}`,
-          {
-            'min-height': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('minHeight'))
-  }
+  return createUtilityPlugin('minHeight', [['min-h', ['minHeight']]])
 }
diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js
index 4dc35106..42bebe37 100644
--- a/src/plugins/minWidth.js
+++ b/src/plugins/minWidth.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('minWidth'), (value, modifier) => {
-        return [
-          `.${e(`min-w-${modifier}`)}`,
-          {
-            'min-width': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('minWidth'))
-  }
+  return createUtilityPlugin('minWidth', [['min-w', ['minWidth']]])
 }
diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js
index 10cb8b18..1bb082ab 100644
--- a/src/plugins/objectPosition.js
+++ b/src/plugins/objectPosition.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('objectPosition'), (value, modifier) => {
-        return [
-          `.${e(`object-${modifier}`)}`,
-          {
-            'object-position': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('objectPosition'))
-  }
+  return createUtilityPlugin('objectPosition', [['object', ['objectPosition']]])
 }
diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js
index b6745b4b..29b932ba 100644
--- a/src/plugins/opacity.js
+++ b/src/plugins/opacity.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('opacity'), (value, modifier) => {
-        return [
-          `.${e(`opacity-${modifier}`)}`,
-          {
-            opacity: value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('opacity'))
-  }
+  return createUtilityPlugin('opacity', [['opacity', ['opacity']]])
 }
diff --git a/src/plugins/order.js b/src/plugins/order.js
index 1c5dd927..e0f627eb 100644
--- a/src/plugins/order.js
+++ b/src/plugins/order.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('order'), (value, modifier) => {
-        return [
-          `.${e(`order-${modifier}`)}`,
-          {
-            order: value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('order'))
-  }
+  return createUtilityPlugin('order', [['order', ['order']]])
 }
diff --git a/src/plugins/outline.js b/src/plugins/outline.js
index b4fa027a..a236001b 100644
--- a/src/plugins/outline.js
+++ b/src/plugins/outline.js
@@ -1,13 +1,14 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('outline'), (value, modifier) => {
         const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
 
         return [
-          `.${e(`outline-${modifier}`)}`,
+          nameClass('outline', modifier),
           {
             outline,
             outlineOffset,
diff --git a/src/plugins/padding.js b/src/plugins/padding.js
index 578efb1c..24156921 100644
--- a/src/plugins/padding.js
+++ b/src/plugins/padding.js
@@ -1,20 +1,21 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(`p-${modifier}`)}`]: { padding: `${size}` },
+        [nameClass('p', modifier)]: { padding: `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(`py-${modifier}`)}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
-        [`.${e(`px-${modifier}`)}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
+        [nameClass('py', modifier)]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
+        [nameClass('px', modifier)]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
       }),
       (size, modifier) => ({
-        [`.${e(`pt-${modifier}`)}`]: { 'padding-top': `${size}` },
-        [`.${e(`pr-${modifier}`)}`]: { 'padding-right': `${size}` },
-        [`.${e(`pb-${modifier}`)}`]: { 'padding-bottom': `${size}` },
-        [`.${e(`pl-${modifier}`)}`]: { 'padding-left': `${size}` },
+        [nameClass('pt', modifier)]: { 'padding-top': `${size}` },
+        [nameClass('pr', modifier)]: { 'padding-right': `${size}` },
+        [nameClass('pb', modifier)]: { 'padding-bottom': `${size}` },
+        [nameClass('pl', modifier)]: { 'padding-left': `${size}` },
       }),
     ]
 
diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js
index 6709da30..bee0a36d 100644
--- a/src/plugins/placeholderColor.js
+++ b/src/plugins/placeholderColor.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('placeholderColor'))
 
     const getProperties = value => {
@@ -21,7 +22,7 @@ export default function() {
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`placeholder-${modifier}`)}::placeholder`, getProperties(value)]
+        return [`${nameClass('placeholder', modifier)}::placeholder`, getProperties(value)]
       })
     )
 
diff --git a/src/plugins/placeholderOpacity.js b/src/plugins/placeholderOpacity.js
index 3164add6..4f95f528 100644
--- a/src/plugins/placeholderOpacity.js
+++ b/src/plugins/placeholderOpacity.js
@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('placeholderOpacity'), (value, modifier) => {
         return [
-          `.${e(`placeholder-opacity-${modifier}`)}::placeholder`,
+          `${nameClass('placeholder-opacity', modifier)}::placeholder`,
           {
             '--placeholder-opacity': value,
           },
diff --git a/src/plugins/space.js b/src/plugins/space.js
index d775f1b3..42c847ac 100644
--- a/src/plugins/space.js
+++ b/src/plugins/space.js
@@ -1,16 +1,16 @@
 import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (size, modifier) => ({
-        [`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
+        [`${nameClass('space-y', modifier)} > :not(template) ~ :not(template)`]: {
           '--space-y-reverse': '0',
           'margin-top': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-y-reverse)))`,
           'margin-bottom': `calc(${size === '0' ? '0px' : size} * var(--space-y-reverse))`,
         },
-        [`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
+        [`${nameClass('space-x', modifier)} > :not(template) ~ :not(template)`]: {
           '--space-x-reverse': '0',
           'margin-right': `calc(${size === '0' ? '0px' : size} * var(--space-x-reverse))`,
           'margin-left': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-x-reverse)))`,
diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js
index 43ab8fc6..d8306ef6 100644
--- a/src/plugins/stroke.js
+++ b/src/plugins/stroke.js
@@ -1,14 +1,15 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('stroke'))
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`stroke-${modifier}`)}`, { stroke: toColorValue(value) }]
+        return [nameClass('stroke', modifier), { stroke: toColorValue(value) }]
       })
     )
 
diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js
index 79db44fc..93d32827 100644
--- a/src/plugins/strokeWidth.js
+++ b/src/plugins/strokeWidth.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('strokeWidth'), (value, modifier) => {
-        return [
-          `.${e(`stroke-${modifier}`)}`,
-          {
-            strokeWidth: value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('strokeWidth'))
-  }
+  return createUtilityPlugin('strokeWidth', [['stroke', ['strokeWidth']]])
 }
diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js
index 0cf8a1b2..54fceee9 100644
--- a/src/plugins/textColor.js
+++ b/src/plugins/textColor.js
@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('textColor'))
 
     const getProperties = value => {
@@ -21,7 +22,7 @@ export default function() {
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`text-${modifier}`)}`, getProperties(value)]
+        return [nameClass('text', modifier), getProperties(value)]
       })
     )
 
diff --git a/src/plugins/width.js b/src/plugins/width.js
index 0492ef3a..441d309d 100644
--- a/src/plugins/width.js
+++ b/src/plugins/width.js
@@ -1,18 +1,5 @@
-import _ from 'lodash'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('width'), (value, modifier) => {
-        return [
-          `.${e(`w-${modifier}`)}`,
-          {
-            width: value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('width'))
-  }
+  return createUtilityPlugin('width', [['w', ['width']]])
 }
diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js
index 47946386..9384ea5e 100644
--- a/src/plugins/zIndex.js
+++ b/src/plugins/zIndex.js
@@ -1,19 +1,5 @@
-import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
-    const utilities = _.fromPairs(
-      _.map(theme('zIndex'), (value, modifier) => {
-        return [
-          `.${e(prefixNegativeModifiers('z', modifier))}`,
-          {
-            'z-index': value,
-          },
-        ]
-      })
-    )
-
-    addUtilities(utilities, variants('zIndex'))
-  }
+  return createUtilityPlugin('zIndex', [['z', ['zIndex']]])
 }
diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js
index 8053cc0b..d3dc8c4f 100644
--- a/src/util/createUtilityPlugin.js
+++ b/src/util/createUtilityPlugin.js
@@ -2,27 +2,16 @@ import identity from 'lodash/identity'
 import fromPairs from 'lodash/fromPairs'
 import toPairs from 'lodash/toPairs'
 import castArray from 'lodash/castArray'
-
-function className(classPrefix, key) {
-  if (key === 'default') {
-    return classPrefix
-  }
-
-  if (key.startsWith('-')) {
-    return `-${classPrefix}${key}`
-  }
-
-  return `${classPrefix}-${key}`
-}
+import nameClass from './nameClass'
 
 export default function createUtilityPlugin(themeKey, utilityVariations) {
-  return function({ e, addUtilities, variants, theme }) {
+  return function({ addUtilities, variants, theme }) {
     const utilities = utilityVariations.map(
       ([classPrefix, properties, transformValue = identity]) => {
         return fromPairs(
           toPairs(theme(themeKey)).map(([key, value]) => {
             return [
-              `.${e(className(classPrefix, key))}`,
+              nameClass(classPrefix, key),
               fromPairs(castArray(properties).map(property => [property, transformValue(value)])),
             ]
           })
diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
index 5110e988..f40d09ec 100644
--- a/src/util/flattenColorPalette.js
+++ b/src/util/flattenColorPalette.js
@@ -8,7 +8,7 @@ export default function flattenColorPalette(colors) {
       }
 
       return _.map(color, (value, key) => {
-        const suffix = key === 'default' ? '' : `-${key}`
+        const suffix = key === 'DEFAULT' ? '' : `-${key}`
         return [`${name}${suffix}`, value]
       })
     })
diff --git a/src/util/nameClass.js b/src/util/nameClass.js
new file mode 100644
index 00000000..44081f7b
--- /dev/null
+++ b/src/util/nameClass.js
@@ -0,0 +1,21 @@
+import escapeClassName from './escapeClassName'
+
+function asClass(name) {
+  return `.${escapeClassName(name)}`
+}
+
+export default function nameClass(classPrefix, key) {
+  if (key === 'DEFAULT') {
+    return asClass(classPrefix)
+  }
+
+  if (key === '-') {
+    return asClass(`-${classPrefix}`)
+  }
+
+  if (key.startsWith('-')) {
+    return asClass(`-${classPrefix}${key}`)
+  }
+
+  return asClass(`${classPrefix}-${key}`)
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 46d40565..f0f4ac6f 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -182,13 +182,13 @@ module.exports = {
     },
     borderColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.gray.300', 'currentColor'),
     }),
     borderOpacity: theme => theme('opacity'),
     borderRadius: {
       none: '0',
       sm: '0.125rem',
-      default: '0.25rem',
+      DEFAULT: '0.25rem',
       md: '0.375rem',
       lg: '0.5rem',
       xl: '0.75rem',
@@ -197,7 +197,7 @@ module.exports = {
       full: '9999px',
     },
     borderWidth: {
-      default: '1px',
+      DEFAULT: '1px',
       '0': '0',
       '2': '2px',
       '4': '4px',
@@ -206,7 +206,7 @@ module.exports = {
     boxShadow: {
       xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
@@ -239,11 +239,11 @@ module.exports = {
     },
     flexGrow: {
       '0': '0',
-      default: '1',
+      DEFAULT: '1',
     },
     flexShrink: {
       '0': '0',
-      default: '1',
+      DEFAULT: '1',
     },
     fontFamily: {
       sans: [
@@ -638,7 +638,7 @@ module.exports = {
     transitionProperty: {
       none: 'none',
       all: 'all',
-      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
       colors: 'background-color, border-color, color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',


Test patch:
diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
index a81239e4..9c85e2fc 100644
--- a/__tests__/containerPlugin.test.js
+++ b/__tests__/containerPlugin.test.js
@@ -217,7 +217,7 @@ test('responsive horizontal padding can be included by default', () => {
         },
         container: {
           padding: {
-            default: '1rem',
+            DEFAULT: '1rem',
             sm: '2rem',
             lg: '4rem',
             xl: '5rem',
diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js
index 98ab5a72..456488a6 100644
--- a/__tests__/flattenColorPalette.test.js
+++ b/__tests__/flattenColorPalette.test.js
@@ -8,7 +8,7 @@ test('it flattens nested color objects', () => {
         25: 'rgba(255,255,255,.25)',
         50: 'rgba(255,255,255,.5)',
         75: 'rgba(255,255,255,.75)',
-        default: '#fff',
+        DEFAULT: '#fff',
       },
       red: {
         1: 'rgb(33,0,0)',
diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js
index aa43c94d..70624632 100644
--- a/__tests__/plugins/boxShadow.test.js
+++ b/__tests__/plugins/boxShadow.test.js
@@ -2,13 +2,13 @@ import _ from 'lodash'
 import escapeClassName from '../../src/util/escapeClassName'
 import plugin from '../../src/plugins/boxShadow'
 
-test('box shadow can use default keyword and negative prefix syntax', () => {
+test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
   const addedUtilities = []
 
   const config = {
     theme: {
       boxShadow: {
-        default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
         md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
         '-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
         '-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js
index b55558a6..165c7df6 100644
--- a/__tests__/plugins/divideWidth.test.js
+++ b/__tests__/plugins/divideWidth.test.js
@@ -5,7 +5,7 @@ test('generating divide width utilities', () => {
   const config = {
     theme: {
       divideWidth: {
-        default: '1px',
+        DEFAULT: '1px',
         '0': '0',
         '2': '2px',
         '4': '4px',
diff --git a/__tests__/plugins/letterSpacing.test.js b/__tests__/plugins/letterSpacing.test.js
index af27532f..9388b19e 100644
--- a/__tests__/plugins/letterSpacing.test.js
+++ b/__tests__/plugins/letterSpacing.test.js
@@ -41,10 +41,12 @@ test('letter spacing can use negative prefix syntax', () => {
 
   expect(addedUtilities).toEqual([
     {
-      utilities: {
-        '.-tracking-1': { 'letter-spacing': '-0.025em' },
-        '.tracking-1': { 'letter-spacing': '0.025em' },
-      },
+      utilities: [
+        {
+          '.-tracking-1': { letterSpacing: '-0.025em' },
+          '.tracking-1': { letterSpacing: '0.025em' },
+        },
+      ],
       variants: ['responsive'],
     },
   ])
diff --git a/__tests__/plugins/zIndex.test.js b/__tests__/plugins/zIndex.test.js
index 4493066e..628a79dc 100644
--- a/__tests__/plugins/zIndex.test.js
+++ b/__tests__/plugins/zIndex.test.js
@@ -43,12 +43,14 @@ test('z index can use negative prefix syntax', () => {
 
   expect(addedUtilities).toEqual([
     {
-      utilities: {
-        '.-z-20': { 'z-index': '-20' },
-        '.-z-10': { 'z-index': '-10' },
-        '.z-10': { 'z-index': '10' },
-        '.z-20': { 'z-index': '20' },
-      },
+      utilities: [
+        {
+          '.-z-20': { zIndex: '-20' },
+          '.-z-10': { zIndex: '-10' },
+          '.z-10': { zIndex: '10' },
+          '.z-20': { zIndex: '20' },
+        },
+      ],
       variants: ['responsive'],
     },
   ])
diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index a5dbeddf..a44762c1 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -4,7 +4,7 @@ import postcss from 'postcss'
 import tailwind from '../src/index'
 import config from '../stubs/defaultConfig.stub.js'
 
-it('generates the right CSS', () => {
+it('generates the right CSS using the default settings', () => {
   const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
   const input = fs.readFileSync(inputPath, 'utf8')
 
diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index e2e3306a..b27503d4 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -648,7 +648,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme
 
 test('the default variant can be generated in a specified position', () => {
   const input = `
-    @variants focus, active, default, hover {
+    @variants focus, active, DEFAULT, hover {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }