diff --git a/tailwind.js b/tailwind.js
index 25fe1695..ca7e1e9f 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -1,7 +1,8 @@
-var colors = {
-  'inherit': 'inherit',
-  'transparent': 'transparent',
+let defaultConfig = require('tailwindcss/defaultConfig')()
 
+var colors = {
+  ...defaultConfig.colors,
+  'inherit': 'inherit',
   'black': '#222b2f',
   'blue': 'hsl(203, 94%, 38%)',
   'blue-dark': '#2779bd',
@@ -16,46 +17,15 @@ var colors = {
   'grey-lightest': '#fafcfc',
   'orange': '#f6993f',
   'red-dark': '#cc1f1a',
-  'white': '#ffffff',
 }
 
-module.exports = {
-
+const config = {
+  ...defaultConfig,
   colors: colors,
-
-  screens: {
-    'sm': '576px',
-    'md': '768px',
-    'lg': '992px',
-    'xl': '1200px',
-  },
-
+  textColors: colors,
+  borderColors: colors,
   fonts: {
-    'sans': [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      'sans-serif',
-    ],
-    'serif': [
-      'Constantia',
-      'Lucida Bright',
-      'Lucidabright',
-      'Lucida Serif',
-      'Lucida',
-      'DejaVu Serif',
-      'Bitstream Vera Serif',
-      'Liberation Serif',
-      'Georgia',
-      'serif',
-    ],
+    ...defaultConfig.fonts,
     'mono': [
       'Roboto Mono',
       'Menlo',
@@ -66,260 +36,24 @@ module.exports = {
       'monospace',
     ]
   },
-
-  textSizes: {
-    'xs': '.75rem',     // 12px
-    'sm': '.875rem',    // 14px
-    'base': '1rem',     // 16px
-    'lg': '1.125rem',   // 18px
-    'xl': '1.25rem',    // 20px
-    '2xl': '1.5rem',    // 24px
-    '3xl': '1.875rem',  // 30px
-    '4xl': '2.25rem',   // 36px
-    '5xl': '3rem',      // 48px
-  },
-
   fontWeights: {
     'normal': 400,
     'medium': 500,
     'bold': 700,
   },
-
-  leading: {
-    'none': 1,
-    'tight': 1.25,
-    'normal': 1.5,
-    'loose': 2,
-  },
-
-  tracking: {
-    'tight': '-0.05em',
-    'normal': '0',
-    'wide': '0.05em',
-  },
-
-  textColors: colors,
-
-  backgroundColors: colors,
-
   borderWidths: {
-    default: '1px',
-    '0': '0',
-    '2': '2px',
+    ...defaultConfig.borderWidths,
     '3': '3px',
-    '4': '4px',
-    '8': '8px',
   },
-
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
-
   borderRadius: {
-    default: '.25rem',
-    'sm': '.125rem',
-    'lg': '.5rem',
-    'full': '9999px',
+    ...defaultConfig.borderRadius,
     'none': '0',
   },
-
-  width: {
-    'auto': 'auto',
-    'px': '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '40': '10rem',
-    '48': '12rem',
-    '64': '16rem',
-    '1/2': '50%',
-    '1/3': '33.33333%',
-    '2/3': '66.66667%',
-    '1/4': '25%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.66667%',
-    '5/6': '83.33333%',
-    'full': '100%',
-    'screen': '100vw'
-  },
-
-  height: {
-    'auto': 'auto',
-    'px': '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '64': '16rem',
-    'full': '100%',
-    'screen': '100vh'
-  },
-
-  minWidth: {
-    '0': '0',
-    'full': '100%',
-  },
-
-  minHeight: {
-    '0': '0',
-    'full': '100%',
-    'screen': '100vh'
-  },
-
-  maxWidth: {
-    'xs': '20rem',
-    'sm': '30rem',
-    'md': '40rem',
-    'lg': '50rem',
-    'xl': '60rem',
-    '2xl': '70rem',
-    '3xl': '80rem',
-    '4xl': '90rem',
-    '5xl': '100rem',
-    'full': '100%',
-  },
-
-  maxHeight: {
-    'full': '100%',
-    'screen': '100vh',
-  },
-
-  padding: {
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '16': '4rem',
-  },
-
-  margin: {
-    'auto': 'auto',
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-  },
-
-  negativeMargin: {
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '16': '4rem',
-  },
-
-  shadows: {
-  },
-
-  zIndex: {
-    'auto': 'auto',
-    '0': 0,
-    '10': 10,
-    '20': 20,
-    '30': 30,
-    '40': 40,
-    '50': 50,
-  },
-
-  opacity: {
-    '0': '0',
-    '25': '.25',
-    '50': '.5',
-    '75': '.75',
-    '100': '1',
-  },
-
-  svgFill: {
-    'current': 'currentColor',
-  },
-
-  svgStroke: {
-    'current': 'currentColor',
-  },
-
   modules: {
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover', 'focus'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderColors: ['responsive', 'hover', 'focus'],
-    borderRadius: ['responsive'],
+    ...defaultConfig.modules,
     borderStyle: ['responsive', 'hover', 'focus'],
     borderWidths: ['responsive', 'hover', 'focus'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    flexbox: ['responsive'],
-    float: ['responsive'],
-    fonts: ['responsive'],
-    fontWeights: ['responsive', 'hover'],
-    height: ['responsive'],
-    leading: ['responsive'],
-    lists: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    negativeMargin: ['responsive'],
-    opacity: ['responsive'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    shadows: ['responsive'],
-    svgFill: [],
-    svgStroke: [],
-    textAlign: ['responsive'],
-    textColors: ['responsive', 'hover', 'focus'],
-    textSizes: ['responsive'],
-    textStyle: ['responsive', 'hover', 'focus'],
-    tracking: ['responsive'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    zIndex: ['responsive'],
   },
-
   plugins: [
     require('tailwindcss/plugins/container')({
       center: true,
@@ -330,11 +64,10 @@ module.exports = {
     require('tailwindcss-skip-link')(),
     require('tailwindcss-vuejs')(),
   ],
-
   options: {
+    ...defaultConfig.options,
     important: true,
-    separator: ':',
-    prefix: ''
   }
-
 }
+
+module.exports = config