chore: bump tailwind to 2, postcss 7 compat mode

package.json

@@ -20,14 +20,13 @@
     "@popperjs/core": "^2.0.3",
     "core-js": "^3.4.3",
     "electron-store": "^5.1.0",
-    "frappejs": "https://github.com/frappe/frappejs",
     "frappe-charts": "1.6.1",
+    "frappejs": "https://github.com/frappe/frappejs",
     "knex": "^0.95.11",
     "lodash": "^4.17.15",
     "luxon": "^1.21.3",
     "portal-vue": "^2.1.6",
     "sqlite3": "^4.1.1",
-    "tailwindcss": "^1.2.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3"
   },
@@ -37,6 +36,7 @@
     "@vue/cli-plugin-router": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
     "@vue/eslint-config-prettier": "^5.0.0",
+    "autoprefixer": "^9",
     "babel-eslint": "^10.0.3",
     "electron": "^8.0.0",
     "electron-devtools-installer": "^3.2.0",
@@ -46,8 +46,10 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
     "lint-staged": "^9.4.3",
+    "postcss": "^7",
     "prettier": "^1.19.1",
     "raw-loader": "^4.0.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "vue-cli-plugin-electron-builder": "^2.0.0",
     "vue-template-compiler": "^2.6.10"
   },

src/pages/Dashboard/Cashflow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 mx-auto mt-4">
+  <div class="mt-4">
     <template v-if="hasData">
       <div class="flex items-center justify-between">
         <div class="font-medium">{{ _('Cashflow') }}</div>

src/pages/Dashboard/Dashboard.vue

@@ -12,7 +12,7 @@
       <div class="my-4 mt-0 border-t" />
       <UnpaidInvoices />
       <div class="my-4 border-t" />
-      <div class="w-96 flex mx-auto">
+      <div class="flex mx-auto">
         <div class="w-1/2 mx-4">
           <ProfitAndLoss />
         </div>

src/pages/Dashboard/UnpaidInvoices.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 flex justify-between mx-auto">
+  <div class="flex justify-between mx-auto">
     <div
       class="w-5/12 mx-4 flex flex-col justify-between"
       v-for="invoice in invoices"

tailwind.config.js

@@ -3,6 +3,12 @@ module.exports = {
     fontFamily: {
       sans: ['Inter', 'sans-serif']
     },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px'
+    },
     fontSize: {
       xs: '11px',
       sm: '12px',
@@ -35,13 +41,13 @@ module.exports = {
       },
       boxShadow: {
         'outline-px': '0 0 0 1px rgba(66, 153, 225, 0.5)',
-        default: '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
+        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: {
         sm: '0.25rem', // 4px
-        default: '0.313rem', // 5px
+        DEFAULT: '0.313rem', // 5px
         md: '0.375rem', // 6px
         lg: '0.5rem', // 8px
         xl: '0.75rem' // 12px
@@ -60,6 +66,105 @@ module.exports = {
           '700': '#9fa5a8',
           '800': '#7f878a',
           '900': '#415668'
+        },
+        red: {
+          100: '#fff5f5',
+          200: '#fed7d7',
+          300: '#feb2b2',
+          400: '#fc8181',
+          500: '#f56565',
+          600: '#e53e3e',
+          700: '#c53030',
+          800: '#9b2c2c',
+          900: '#742a2a'
+        },
+        orange: {
+          100: '#fffaf0',
+          200: '#feebc8',
+          300: '#fbd38d',
+          400: '#f6ad55',
+          500: '#ed8936',
+          600: '#dd6b20',
+          700: '#c05621',
+          800: '#9c4221',
+          900: '#7b341e'
+        },
+        yellow: {
+          100: '#fffff0',
+          200: '#fefcbf',
+          300: '#faf089',
+          400: '#f6e05e',
+          500: '#ecc94b',
+          600: '#d69e2e',
+          700: '#b7791f',
+          800: '#975a16',
+          900: '#744210'
+        },
+        green: {
+          100: '#f0fff4',
+          200: '#c6f6d5',
+          300: '#9ae6b4',
+          400: '#68d391',
+          500: '#48bb78',
+          600: '#38a169',
+          700: '#2f855a',
+          800: '#276749',
+          900: '#22543d'
+        },
+        teal: {
+          100: '#e6fffa',
+          200: '#b2f5ea',
+          300: '#81e6d9',
+          400: '#4fd1c5',
+          500: '#38b2ac',
+          600: '#319795',
+          700: '#2c7a7b',
+          800: '#285e61',
+          900: '#234e52'
+        },
+        blue: {
+          100: '#ebf8ff',
+          200: '#bee3f8',
+          300: '#90cdf4',
+          400: '#63b3ed',
+          500: '#4299e1',
+          600: '#3182ce',
+          700: '#2b6cb0',
+          800: '#2c5282',
+          900: '#2a4365'
+        },
+        indigo: {
+          100: '#ebf4ff',
+          200: '#c3dafe',
+          300: '#a3bffa',
+          400: '#7f9cf5',
+          500: '#667eea',
+          600: '#5a67d8',
+          700: '#4c51bf',
+          800: '#434190',
+          900: '#3c366b'
+        },
+        purple: {
+          100: '#faf5ff',
+          200: '#e9d8fd',
+          300: '#d6bcfa',
+          400: '#b794f4',
+          500: '#9f7aea',
+          600: '#805ad5',
+          700: '#6b46c1',
+          800: '#553c9a',
+          900: '#44337a'
+        },
+        pink: {
+          100: '#fff5f7',
+          200: '#fed7e2',
+          300: '#fbb6ce',
+          400: '#f687b3',
+          500: '#ed64a6',
+          600: '#d53f8c',
+          700: '#b83280',
+          800: '#97266d',
+          900: '#702459'
         }
       }
     }