Update Tailwind config

tailwind.config.js

@@ -0,0 +1,59 @@
+defaultTheme = require('tailwindcss/defaultTheme')()
+
+module.exports = {
+  theme: {
+    colors: {
+     'inherit': 'inherit',
+      'black': '#22292f',
+      'blue': '#018dc7',
+      'blue-dark': '#0e68a7',
+      'blue-darker': '#004f86',
+      'blue-light': '#29aae1',
+      'green': '#398002',
+      'grey': '#B7B7B7',
+      'grey-dark': '#888888',
+      'grey-darker': '#555555',
+      'grey-darkest': '#333333',
+      'grey-light': '#DDDDDD',
+      'grey-lighter': '#eeeeee',
+      'grey-lightest': '#f8fafc',
+      'orange': '#FA9903',
+      'orange-light': '#FFB401',
+      'purple': '#991FAF',
+      'red-dark': '#cc1f1a',
+      'teal': '#3F7B8F',
+      'transparent': 'transparent',
+      'white': '#ffffff',
+      'yellow-lightest': '#FAF8DF'
+    },
+    extend: {
+      borderWidth: {
+        '3': '3px',
+        '6': '6px',
+        '10': '10px',
+      },
+      boxShadow: {
+        md: '0 0 10px 0 rgba(0,0,0,0.1)',
+      },
+      fontFamily: {
+        'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        '2xs': '.625rem', // 10px
+      },
+      spacing: {
+        '48': '10rem',
+        '56': '14rem',
+        '64': '16rem',
+      },
+      width: {
+        '56': '14rem',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss/plugins/container')(),
+    require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),
+    require('tailwindcss-visuallyhidden')(),
+  ],
+}

tailwind.js

@@ -1,82 +0,0 @@
-let defaultConfig = require('tailwindcss/defaultConfig')()
-
-var colors = {
-  ...defaultConfig.colors,
-  'inherit': 'inherit',
-  'black': '#22292f',
-  'blue': '#018dc7',
-  'blue-dark': '#0e68a7',
-  'blue-darker': '#004f86',
-  'blue-light': '#29aae1',
-  'green': '#398002',
-  'grey': '#B7B7B7',
-  'grey-dark': '#888888',
-  'grey-darker': '#555555',
-  'grey-darkest': '#333333',
-  'grey-light': '#DDDDDD',
-  'grey-lighter': '#eeeeee',
-  'grey-lightest': '#f8fafc',
-  'orange': '#FA9903',
-  'orange-light': '#FFB401',
-  'purple': '#991FAF',
-  'red-dark': '#cc1f1a',
-  'teal': '#3F7B8F',
-  'transparent': 'transparent',
-  'white': '#ffffff',
-  'yellow-lightest': '#FAF8DF'
-}
-
-module.exports = {
-  ...defaultConfig,
-  colors: colors,
-  textColors: colors,
-  backgroundColors: colors,
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
-  fonts: {
-    ...defaultConfig.fonts,
-    'sans': [
-      'Proxima Nova',
-      'system-ui',
-      'BlinkMacSystemFont',
-      '-apple-system',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      'sans-serif',
-    ],
-  },
-  textSizes: {
-    ...defaultConfig.textSizes,
-    '2xs': '.625rem', // 10px
-  },
-  borderWidths: {
-    ...defaultConfig.borderWidths,
-    '3': '3px',
-    '6': '6px',
-    '10': '10px',
-  },
-  margin: {
-    ...defaultConfig.margin,
-    '48': '10rem',
-    '56': '14rem',
-    '64': '16rem',
-  },
-  width: {
-    ...defaultConfig.width,
-    '56': '14rem',
-  },
-  shadows: {
-    ...defaultConfig.shadows,
-    'md': '0 0 10px 0 rgba(0,0,0,0.1)'
-  },
-  plugins: [
-    require('tailwindcss/plugins/container')(),
-    require('tailwindcss-spaced-items')(),
-    require('tailwindcss-visuallyhidden')(),
-  ],
-}