fix: Customize tailwind theme

- Expose tailwind theme config in theme.js

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="focus:outline-none rounded-6px"
+    class="focus:outline-none rounded-6px shadow-button"
     :style="style"
     v-bind="$attrs"
     v-on="$listeners"
@@ -24,12 +24,11 @@ export default {
   computed: {
     style() {
       return {
-        padding: this.icon ? '9px 15px' : '6px 24px',
+        padding: this.icon ? '6px 12px' : '6px 24px',
         'background-image':
           this.type === 'primary'
             ? 'linear-gradient(180deg, #2C9AF1 0%, #2490EF 100%)'
-            : 'linear-gradient(180deg, #FFFFFF 0%, #F4F4F6 100%)',
-        'box-shadow': '0 0.5px 0 0 rgba(0,0,0,0.08)'
+            : 'linear-gradient(180deg, #FFFFFF 0%, #F4F4F6 100%)'
       };
     }
   }

src/components/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative" v-on-outside-click="() => isShown = false">
-    <div>
+    <div class="h-full">
       <slot
         :toggleDropdown="toggleDropdown"
         :highlightItemUp="highlightItemUp"
@@ -10,13 +10,13 @@
     </div>
     <div
       :class="right ? 'right-0' : 'left-0'"
-      class="mt-1 absolute z-10 bg-white rounded-5px border w-full min-w-56"
+      class="mt-1 absolute z-10 bg-white rounded-5px border w-full min-w-40 shadow-md"
       v-if="isShown"
     >
       <div class="p-1 max-h-64 overflow-auto">
         <a
           ref="items"
-          class="block p-2 rounded mt-1 first:mt-0 cursor-pointer whitespace-no-wrap text-sm"
+          class="block p-2 rounded mt-1 first:mt-0 cursor-pointer whitespace-no-wrap"
           v-for="(d, index) in items"
           :key="d.label"
           :class="index === highlightedIndex ? 'bg-gray-100' : ''"

src/components/PageHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="mt-4 px-8 flex justify-between items-center window-drag">
+  <div class="mt-4 px-8 flex justify-between window-drag">
     <slot name="title" />
-    <div class="flex items-center">
+    <div class="flex items-stretch">
       <slot name="actions" />
     </div>
   </div>

src/theme.js

@@ -1,4 +1,4 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '../tailwind.config';
+const resolveConfig = require('tailwindcss/resolveConfig');
+const tailwindConfig = require('../tailwind.config');
 
-export default resolveConfig(tailwindConfig).theme;
+module.exports = resolveConfig(tailwindConfig).theme;

tailwind.config.js

@@ -1,25 +1,42 @@
 module.exports = {
   theme: {
     fontFamily: {
-      sans: ['Inter var experimental', 'sans-serif'],
+      sans: ['Inter var experimental', 'sans-serif']
+    },
+    fontSize: {
+      xs: '11px',
+      sm: '12px',
+      base: '13px',
+      lg: '14px',
+      xl: '18px',
+      '2xl': '20px',
+      '3xl': '24px',
+      '4xl': '28px'
     },
     extend: {
       maxHeight: {
         '64': '16rem'
       },
       minWidth: {
+        '40': '10rem',
+        '56': '14rem',
         '56': '14rem'
       },
       maxWidth: {
+        '32': '8rem',
         '56': '14rem'
       },
       spacing: {
+        '7': '1.75rem',
         '14': '3.5rem',
         '72': '18rem',
         '80': '20rem'
       },
       boxShadow: {
-        'outline-px': '0 0 0 1px rgba(66,153,225,0.5)'
+        'outline-px': '0 0 0 1px rgba(66, 153, 225, 0.5)',
+        default: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
+        md: '0 0 2px 0 rgba(0, 0, 0, 0.10), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
+        button: '0 0.5px 0 0 rgba(0, 0, 0, 0.08)'
       },
       borderRadius: {
         '5px': '5px',
@@ -37,14 +54,14 @@ module.exports = {
           '600': '#a1abb4',
           '700': '#9fa5a8',
           '800': '#7f878a',
-          '900': '#415668',
+          '900': '#415668'
         }
       }
     }
   },
   variants: {
     margin: ['responsive', 'first', 'hover', 'focus'],
-    backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],
+    backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within']
   },
   plugins: []
 };