Update tailwind.config.js

tailwind.config.js

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