Update tailwind.config.js

tailwind.config.js

@@ -1,65 +1,42 @@
-const _ = require('lodash')
-
-let defaultConfig = require('tailwindcss/defaultConfig')()
-
-var colors = {
-  ...defaultConfig.colors,
-  'inherit': 'inherit',
-  'black': '#222b2f',
-  'blue': 'hsl(203, 94%, 38%)',
-  'blue-dark': '#2779bd',
-  'blue-lighter': '#bcdefa',
-  'green-dark': '#1f9d55',
-  'grey': '#9babb4',
-  'grey-dark': '#70818a',
-  'grey-darker': '#596a73',
-  'grey-light': 'hsl(203, 25%, 88%)',
-  'grey-lighter': 'hsl(203, 22%, 95%)',
-  'grey-lightest': '#fafcfc',
-  'orange': '#f6993f',
-  'red-dark': '#cc1f1a',
-}
+let defaultTheme = require('tailwindcss/defaultTheme')()
 
 module.exports = {
-  ...defaultConfig,
-  colors: colors,
-  textColors: colors,
-  backgroundColors: colors,
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
-  fonts: {
-    ...defaultConfig.fonts,
-    'mono': ['Roboto Mono', ...defaultConfig.fonts.mono],
+  theme: {
+    extend: {
+      color: {
+        blue: {
+          dark: '#2779bd',
+          default: 'hsl(203, 94%, 38%)',
+          lighter: '#bcdefa',
         },
-  fontWeights: _.pick(defaultConfig.fontWeights, ['normal', 'medium', 'bold']),
-  margin: {
-    ...defaultConfig.margin,
+        grey: {
+          dark: '#70818a',
+          darker: '#596a73',
+          default: '#9babb4',
+          light: 'hsl(203, 25%, 88%)',
+          lighter: 'hsl(203, 22%, 95%)',
+          lightest: '#fafcfc',
+        },
+      },
+      fontFamily: {
+        mono: [ 'Roboto Mono', ...defaultTheme.fontFamily.mono ],
+      },
+      spacing: {
         '2px': '2px',
       },
-  borderWidths: {
-    ...defaultConfig.borderWidths,
+      borderWidth: {
         '3': '3px',
       },
-  borderRadius: {
-    ...defaultConfig.borderRadius,
-    'none': '0',
     },
-  modules: {
-    ...defaultConfig.modules,
-    borderStyle: ['responsive', 'hover', 'focus'],
-    borderWidths: ['responsive', 'hover', 'focus'],
   },
   plugins: [
-    require('tailwindcss/plugins/container')({
-      center: true,
-      padding: '1rem',
-    }),
-    require('tailwindcss-spaced-items')(),
+    require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),
     require('tailwindcss-visuallyhidden')(),
     require('tailwindcss-skip-link')(),
     require('tailwindcss-vuejs')(),
   ],
-  options: {
-    ...defaultConfig.options,
-    important: true,
-  }
+  variants: {
+    borderStyle: ['responsive', 'hover', 'focus'],
+    borderWidths: ['responsive', 'hover', 'focus'],
+  },
 }