Update tailwind and fix configuration

web/app/package.json

@@ -8,23 +8,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "autoprefixer": "^9.8.6",
     "core-js": "^3.6.5",
-    "postcss": "^7.0.35",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.1.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0"
+    "eslint-plugin-vue": "^7.0.0-0",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
   },
   "eslintConfig": {
     "root": true,

web/app/postcss.config.js

@@ -1,5 +1,8 @@
+const tailwindcss = require('tailwindcss');
+
 module.exports = {
 	plugins: [
-		require('tailwindcss')
+		tailwindcss('./tailwind.config.js'),
+		require('autoprefixer'),
 	],
 };

web/app/src/components/Pagination.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="mt-3 flex">
     <div class="flex-1">
-      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border text-monospace text-gray-500">&lt;</button>
+      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&lt;</button>
     </div>
     <div class="flex-1 text-right">
-      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border text-monospace text-gray-500">&gt;</button>
+      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&gt;</button>
     </div>
   </div>
 </template>

web/app/src/components/ServiceGroup.vue

@@ -2,7 +2,7 @@
   <div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
     <slot v-if="name !== 'undefined'">
       <div class="service-group pt-2 border" @click="toggleGroup">
-        <h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'>
+        <h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3'>
           <span v-if="healthy" class='text-green-600'>&#10003;</span>
           <span v-else class='text-yellow-400'>~</span>
           {{ name }}

web/app/src/index.css

@@ -5,7 +5,3 @@
 .bg-success {
     background-color: #28a745;
 }
-
-.text-monospace {
-    font-family: Consolas, monospace;
-}

web/app/src/views/Details.vue

@@ -4,7 +4,7 @@
   </router-link>
   <div>
     <slot v-if="serviceStatus">
-      <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
+      <h1 class="text-xl xl:text-3xl font-mono text-gray-400">RECENT CHECKS</h1>
       <hr class="mb-4" />
       <Service
           :data="serviceStatus"
@@ -15,7 +15,7 @@
       <Pagination @page="changePage"/>
     </slot>
     <div v-if="uptime" class="mt-12">
-      <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">UPTIME</h1>
+      <h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
       <hr />
       <div class="flex space-x-4 text-center text-xl xl:text-2xl mt-3">
         <div class="flex-1">
@@ -32,7 +32,7 @@
         </div>
       </div>
       <hr class="mt-1"/>
-      <h3 class="text-xl text-monospace text-gray-400 mt-1 text-right">BADGES</h3>
+      <h3 class="text-xl font-mono text-gray-400 mt-1 text-right">BADGES</h3>
       <div v-if="serviceStatus && serviceStatus.key" class="flex space-x-4 text-center text-2xl mt-6 relative bottom-12">
         <div class="flex-1">
           <img :src="generateBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
@@ -46,7 +46,7 @@
       </div>
     </div>
     <div>
-      <h1 class="text-xl xl:text-3xl text-monospace text-gray-400 mt-4">EVENTS</h1>
+      <h1 class="text-xl xl:text-3xl font-mono text-gray-400 mt-4">EVENTS</h1>
       <hr class="mb-4" />
       <div>
         <slot v-for="event in events" :key="event">

web/app/tailwind.config.js

@@ -2,6 +2,9 @@ module.exports = {
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
+    fontFamily: {
+      'mono': ['Consolas', 'Monaco', '"Courier New"', 'monospace']
+    },
     extend: {},
   },
   variants: {