diff --git a/__tests__/defineClass.test.js b/__tests__/defineClass.test.js
index 369e92f70..2dfc46749 100644
--- a/__tests__/defineClass.test.js
+++ b/__tests__/defineClass.test.js
@@ -1,38 +1,23 @@
 import postcss from 'postcss'
 import fs from 'fs'
 import _ from 'lodash'
+import c from '../src/util/collapseWhitespace'
 import defineClass from '../src/util/defineClass'
 
-let flexHelper = `.flex {
-    display: flex
-}`
-
-let inlineBlock = `.inline-block {
-    display: inline-block
-}`
-
-let inlineFlexHelper = `.inline-flex {
-    display: inline-flex
-}`
-
-let backgroundColor = `.bg-1 {
-    background-color: #bada55
-}`
-
 /**
  * Tests
  */
 it('creates a proper single-word class with rules', () => {
   let output = defineClass('flex', {display: 'flex'})
-  expect(output.toString()).toEqual(flexHelper)
+  expect(c(output.toString())).toEqual(`.flex { display: flex }`)
 })
 
-it('generates a rule with a kebab-case selector', () => {
+it('does not modify the case of selector names', () => {
   let output = defineClass('inlineBlock', {display: 'inline-block'})
-  expect(output.toString()).toEqual(inlineBlock)
+  expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`)
 })
 
-it('generates a rule with a kebab-case property name', () => {
+it('converts property names to kebab-case', () => {
   let output = defineClass('bg-1', {backgroundColor: '#bada55'})
-  expect(output.toString()).toEqual(backgroundColor)
+  expect(c(output.toString())).toEqual(`.bg-1 { background-color: #bada55 }`)
 })
diff --git a/__tests__/defineClasses.test.js b/__tests__/defineClasses.test.js
index 5e5dbdbc7..c33bdc9af 100644
--- a/__tests__/defineClasses.test.js
+++ b/__tests__/defineClasses.test.js
@@ -1,31 +1,22 @@
 import postcss from 'postcss'
 import fs from 'fs'
 import _ from 'lodash'
+import c from '../src/util/collapseWhitespace'
 import defineClasses from '../src/util/defineClasses'
 
-let config = {
-  flex: {
-    display: 'flex',
-  },
-  inlineFlex: {
-    display: 'inline-flex',
-  },
-}
-
-let flexHelper = `.flex {
-    display: flex
-}`
-
-let inlineFlexHelper = `.inline-flex {
-    display: inline-flex
-}`
-
 /**
  * Tests
  */
 it('it generates a set of helper classes from a config', () => {
-  let output = defineClasses(config)
+  let output = defineClasses({
+    'flex': {
+      display: 'flex',
+    },
+    'inline-flex': {
+      display: 'inline-flex',
+    },
+  })
   expect(output).toBeInstanceOf(Array)
-  expect(output[0].toString()).toEqual(flexHelper)
-  expect(output[1].toString()).toEqual(inlineFlexHelper)
+  expect(c(output[0].toString())).toEqual(`.flex { display: flex }`)
+  expect(c(output[1].toString())).toEqual(`.inline-flex { display: inline-flex }`)
 })
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index ba9b0bb16..01cd38ed2 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -6,63 +6,63 @@ export default {
     xl: '1200px',
   },
   colors: {
-    black: '#000000',
-    grey900: '#212b35',
-    grey800: '#404e5c',
-    grey700: '#647382',
-    grey600: '#919eab',
-    grey500: '#c5ced6',
-    grey400: '#dfe3e8',
-    grey300: '#f0f2f5',
-    grey200: '#f7f9fa',
-    white: '#ffffff',
-    redDark: '#d43633',
-    red: '#f25451',
-    redLight: '#fa8785',
-    redLightest: '#fff1f0',
-    orangeDark: '#f29500',
-    orange: '#ffb82b',
-    orangeLight: '#ffd685',
-    orangeLightest: '#fff8eb',
-    yellowDark: '#ffc400',
-    yellow: '#ffe14a',
-    yellowLight: '#ffea83',
-    yellowLightest: '#fffbe5',
-    greenDark: '#34ae4c',
-    green: '#57d06f',
-    greenLight: '#b1f3be',
-    greenLightest: '#eefff1',
-    tealDark: '#249e9a',
-    teal: '#4dc0b5',
-    tealLight: '#9eebe4',
-    tealLightest: '#eefffd',
-    blueDark: '#3687c8',
-    blue: '#4aa2ea',
-    blueLight: '#acdaff',
-    blueLightest: '#f1f9ff',
-    indigoDark: '#4957a5',
-    indigo: '#6574cd',
-    indigoLight: '#bcc5fb',
-    indigoLightest: '#f4f5ff',
-    purpleDark: '#714cb4',
-    purple: '#976ae6',
-    purpleLight: '#ceb3ff',
-    purpleLightest: '#f7f3ff',
-    pinkDark: '#d84f7d',
-    pink: '#f66d9b',
-    pinkLight: '#ffa5c3',
-    pinkLightest: '#fdf2f5',
+    'black': '#000000',
+    'grey900': '#212b35',
+    'grey800': '#404e5c',
+    'grey700': '#647382',
+    'grey600': '#919eab',
+    'grey500': '#c5ced6',
+    'grey400': '#dfe3e8',
+    'grey300': '#f0f2f5',
+    'grey200': '#f7f9fa',
+    'white': '#ffffff',
+    'red-dark': '#d43633',
+    'red': '#f25451',
+    'red-light': '#fa8785',
+    'red-lightest': '#fff1f0',
+    'orange-dark': '#f29500',
+    'orange': '#ffb82b',
+    'orange-light': '#ffd685',
+    'orange-lightest': '#fff8eb',
+    'yellow-dark': '#ffc400',
+    'yellow': '#ffe14a',
+    'yellow-light': '#ffea83',
+    'yellow-lightest': '#fffbe5',
+    'green-dark': '#34ae4c',
+    'green': '#57d06f',
+    'green-light': '#b1f3be',
+    'green-lightest': '#eefff1',
+    'teal-dark': '#249e9a',
+    'teal': '#4dc0b5',
+    'teal-light': '#9eebe4',
+    'teal-lightest': '#eefffd',
+    'blue-dark': '#3687c8',
+    'blue': '#4aa2ea',
+    'blue-light': '#acdaff',
+    'blue-lightest': '#f1f9ff',
+    'indigo-dark': '#4957a5',
+    'indigo': '#6574cd',
+    'indigo-light': '#bcc5fb',
+    'indigo-lightest': '#f4f5ff',
+    'purple-dark': '#714cb4',
+    'purple': '#976ae6',
+    'purple-light': '#ceb3ff',
+    'purple-lightest': '#f7f3ff',
+    'pink-dark': '#d84f7d',
+    'pink': '#f66d9b',
+    'pink-light': '#ffa5c3',
+    'pink-lightest': '#fdf2f5',
   },
   backgroundColors: [
     {
-      light: 'white',
-      lightSoft: 'grey-200',
-      lightSofter: 'grey-300',
-      lightSoftest: 'grey-400',
-      dark: 'grey-900',
-      darkSoft: 'grey-800',
-      darkSofter: 'grey-700',
-      darkSoftest: 'grey-600',
+      'light': 'white',
+      'light-soft': 'grey-200',
+      'light-softer': 'grey-300',
+      'light-softest': 'grey-400',
+      'dark': 'grey-900',
+      'dark-soft': 'grey-800',
+      'dark-softer': 'grey-700',
+      'dark-softest': 'grey-600',
     },
     'red-dark',
     'red',
@@ -107,25 +107,25 @@ export default {
       color: 'grey-500',
     },
     widths: {
-      0: '0',
-      2: '2px',
-      4: '4px',
-      8: '8px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
     },
     colors: [
       {
-        light: 'white',
-        lightSoft: 'grey-200',
-        lightSofter: 'grey-300',
-        dark: 'grey-600',
-        darkSoft: 'grey-500',
-        darkSofter: 'grey-400',
-        lightOverlay: 'hsla(0, 0%, 0%, 20%)',
-        lightOverlaySoft: 'hsla(0, 0%, 0%, 10%)',
-        lightOverlaySofter: 'hsla(0, 0%, 0%, 5%)',
-        darkOverlay: 'hsla(0, 0%, 100%, 100%)',
-        darkOverlaySoft: 'hsla(0, 0%, 100%, 60%)',
-        darkOverlaySofter: 'hsla(0, 0%, 100%, 35%)',
+        'light': 'white',
+        'light-soft': 'grey-200',
+        'light-softer': 'grey-300',
+        'dark': 'grey-600',
+        'dark-soft': 'grey-500',
+        'dark-softer': 'grey-400',
+        'light-overlay': 'hsla(0, 0%, 0%, 20%)',
+        'light-overlay-soft': 'hsla(0, 0%, 0%, 10%)',
+        'light-overlay-softer': 'hsla(0, 0%, 0%, 5%)',
+        'dark-overlay': 'hsla(0, 0%, 100%, 100%)',
+        'dark-overlay-soft': 'hsla(0, 0%, 100%, 60%)',
+        'dark-overlay-softer': 'hsla(0, 0%, 100%, 35%)',
       },
       'red-dark',
       'red',
@@ -166,10 +166,10 @@ export default {
     ]
   },
   shadows: {
-    1: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
-    2: '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
-    3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
-    4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
-    5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
+    '1': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
+    '2': '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
+    '3': '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
+    '4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
+    '5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
   },
 }
diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSize.js
index 3836e043a..1ddaddad8 100644
--- a/src/generators/backgroundSize.js
+++ b/src/generators/backgroundSize.js
@@ -2,10 +2,10 @@ import defineClasses from '../util/defineClasses'
 
 export default function() {
   return defineClasses({
-    bgCover: {
+    'bg-cover': {
       backgroundSize: 'cover',
     },
-    bgContain: {
+    'bg-contain': {
       backgroundSize: 'contain',
     },
   })
diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js
index a268c1705..7fce291fd 100644
--- a/src/generators/borderWidths.js
+++ b/src/generators/borderWidths.js
@@ -5,19 +5,19 @@ import findColor from '../util/findColor'
 
 function defaultBorder(width, color) {
   return defineClasses({
-    border: {
+    'border': {
       border: `${width} solid ${color}`,
     },
-    borderT: {
+    'border-t': {
       borderTop: `${width} solid ${color}`,
     },
-    borderR: {
+    'border-r': {
       borderRight: `${width} solid ${color}`,
     },
-    borderB: {
+    'border-b': {
       borderBottom: `${width} solid ${color}`,
     },
-    borderL: {
+    'border-l': {
       borderLeft: `${width} solid ${color}`,
     },
   })
diff --git a/src/generators/flex.js b/src/generators/flex.js
index e669d179f..e9dd21aef 100644
--- a/src/generators/flex.js
+++ b/src/generators/flex.js
@@ -4,82 +4,82 @@ import defineClasses from '../util/defineClasses'
 
 export default function() {
   return defineClasses({
-    flex: {
+    'flex': {
       display: 'flex',
     },
-    inlineFlex: {
+    'inline-flex': {
       display: 'inline-flex',
     },
-    flexRow: {
+    'flex-row': {
       flexDirection: 'row',
     },
-    flexRowReverse: {
+    'flex-row-reverse': {
       flexDirection: 'row-reverse',
     },
-    flexCol: {
+    'flex-col': {
       flexDirection: 'column',
     },
-    flexColReverse: {
+    'flex-col-reverse': {
       flexDirection: 'column-reverse',
     },
-    flexWrap: {
+    'flex-wrap': {
       flexWrap: 'wrap',
     },
-    flexWrapReverse: {
+    'flex-wrap-reverse': {
       flexWrap: 'wrap-reverse',
     },
-    flexNowrap: {
+    'flex-nowrap': {
       flexWrap: 'nowrap',
     },
-    itemsStart: {
+    'items-start': {
       alignItems: 'flex-start',
     },
-    itemsEnd: {
+    'items-end': {
       alignItems: 'flex-end',
     },
-    itemsCenter: {
+    'items-center': {
       alignItems: 'center',
     },
-    itemsBaseline: {
+    'items-baseline': {
       alignItems: 'baseline',
     },
-    itemsStretch: {
+    'items-stretch': {
       alignItems: 'stretch',
     },
-    justifyStart: {
+    'justify-start': {
       justifyContent: 'flex-start',
     },
-    justifyEnd: {
+    'justify-end': {
       justifyContent: 'flex-end',
     },
-    justifyCenter: {
+    'justify-center': {
       justifyContent: 'center',
     },
-    justifyBetween: {
+    'justify-between': {
       justifyContent: 'space-between',
     },
-    justifyAround: {
+    'justify-around': {
       justifyContent: 'space-around',
     },
-    flexAuto: {
+    'flex-auto': {
       flex: 'auto',
     },
-    flexInitial: {
+    'flex-initial': {
       flex: 'initial',
     },
-    flexNone: {
+    'flex-none': {
       flex: 'none',
     },
-    flexGrow: {
+    'flex-grow': {
       flexGrow: '1',
     },
-    flexShrink: {
+    'flex-shrink': {
       flexShrink: '1',
     },
-    flexNoGrow: {
+    'flex-no-grow': {
       flexGrow: '0',
     },
-    flexNoShrink: {
+    'flex-no-shrink': {
       flexShrink: '0',
     },
   })
diff --git a/src/util/collapseWhitespace.js b/src/util/collapseWhitespace.js
new file mode 100644
index 000000000..842031b59
--- /dev/null
+++ b/src/util/collapseWhitespace.js
@@ -0,0 +1,3 @@
+export default function collapseWhitespace(str) {
+  return str.replace(/(\n|\r|\r\n)/g, ' ').replace(/\s+/g, ' ')
+}
diff --git a/src/util/defineClass.js b/src/util/defineClass.js
index 5031f6e26..c31488ced 100644
--- a/src/util/defineClass.js
+++ b/src/util/defineClass.js
@@ -10,6 +10,6 @@ export default function(className, properties) {
   })
 
   return postcss.rule({
-    selector: `.${_.kebabCase(className)}`,
+    selector: `.${className}`,
   }).append(decls)
 }