From a0a405dc7f4c8344cfd2efe5009cedbcdf853469 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <vkaelin@hey.com>
Date: Thu, 21 Sep 2023 12:52:17 +0200
Subject: [PATCH] style: sort all tailwind classes with prettier plugin

---
 client/.prettierrc                            | 11 ---
 client/.prettierrc.js                         | 12 +++
 client/package-lock.json                      | 75 ++++++++++++++++++-
 client/package.json                           |  2 +
 client/src/App.vue                            |  2 +-
 client/src/assets/css/base.css                | 10 +--
 client/src/assets/css/transition.css          |  4 +-
 client/src/components/Common/CubeLoader.vue   | 10 +--
 client/src/components/Common/DotsLoader.vue   |  8 +-
 client/src/components/Common/Ripple.vue       |  6 +-
 client/src/components/Common/Tooltip.vue      |  2 +-
 client/src/components/Form/LoadingButton.vue  | 10 +--
 client/src/components/Form/SearchForm.vue     | 12 +--
 .../components/Form/SearchFormDropdown.vue    | 35 +++++----
 .../Form/SearchFormDropdownPlayer.vue         | 18 ++---
 .../src/components/Form/SearchFormRegion.vue  | 14 ++--
 client/src/components/Form/SwitchToggle.vue   | 12 +--
 .../components/Global/PopupNotification.vue   |  6 +-
 client/src/components/Layout/MainFooter.vue   |  6 +-
 client/src/components/Match/DetailedMatch.vue |  4 +-
 .../Match/DetailedMatchGlobalStats.vue        | 12 +--
 .../components/Match/DetailedMatchTeam.vue    | 74 +++++++++---------
 client/src/components/Match/LiveMatch.vue     | 22 +++---
 client/src/components/Match/Match.vue         | 68 ++++++++---------
 client/src/components/Match/MatchItems.vue    | 28 +++----
 .../src/components/Match/Runes/RuneStyle.vue  | 24 +++---
 .../components/Match/Runes/RunesContainer.vue |  4 +-
 .../Summoner/Champions/ChampionsSearch.vue    |  4 +-
 .../Summoner/Champions/ChampionsTable.vue     | 16 ++--
 .../Summoner/Champions/FilterQueue.vue        |  6 +-
 .../Summoner/Champions/OnlyMostPlayed.vue     |  2 +-
 .../src/components/Summoner/FilterSeason.vue  |  8 +-
 .../src/components/Summoner/Live/LiveTeam.vue | 60 +++++++--------
 .../Summoner/Overview/OverviewLoader.vue      |  2 +-
 .../Summoner/Overview/SummonerChampions.vue   | 32 ++++----
 .../Summoner/Overview/SummonerMates.vue       | 16 ++--
 .../Summoner/Overview/SummonerStats.vue       | 54 ++++++-------
 .../components/Summoner/RecentActivity.vue    | 18 ++---
 .../Summoner/Records/RecordCard.vue           | 10 +--
 .../components/Summoner/SummonerRanked.vue    | 28 +++----
 client/src/layouts/Default.vue                | 44 +++++------
 client/src/views/Home.vue                     | 14 ++--
 client/src/views/Summoner.vue                 |  6 +-
 client/src/views/SummonerLive.vue             | 10 +--
 client/src/views/SummonerRecords.vue          | 20 ++---
 45 files changed, 461 insertions(+), 380 deletions(-)
 delete mode 100644 client/.prettierrc
 create mode 100644 client/.prettierrc.js

diff --git a/client/.prettierrc b/client/.prettierrc
deleted file mode 100644
index 81a7fef..0000000
--- a/client/.prettierrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "trailingComma": "es5",
-  "semi": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "quoteProps": "consistent",
-  "bracketSpacing": true,
-  "arrowParens": "always",
-  "printWidth": 100,
-  "endOfLine": "auto"
-}
diff --git a/client/.prettierrc.js b/client/.prettierrc.js
new file mode 100644
index 0000000..1934747
--- /dev/null
+++ b/client/.prettierrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  trailingComma: 'es5',
+  semi: false,
+  singleQuote: true,
+  useTabs: false,
+  quoteProps: 'consistent',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  printWidth: 100,
+  endOfLine: 'auto',
+  plugins: ['prettier-plugin-tailwindcss'],
+}
diff --git a/client/package-lock.json b/client/package-lock.json
index dcb89be..51df512 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -29,6 +29,8 @@
         "eslint-plugin-vue": "^9.17.0",
         "postcss": "^8.4.30",
         "postcss-import": "^12.0.1",
+        "prettier": "^3.0.3",
+        "prettier-plugin-tailwindcss": "^0.5.4",
         "tailwindcss": "^3.3.3",
         "vite": "^4.4.5",
         "vite-plugin-eslint": "^1.8.1"
@@ -4421,7 +4423,6 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
       "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -4444,6 +4445,78 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.4.tgz",
+      "integrity": "sha512-QZzzB1bID6qPsKHTeA9qPo1APmmxfFrA5DD3LQ+vbTmAnY40eJI7t9Q1ocqel2EKMWNPLJqdTDWZj1hKYgqSgg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 3281a94..f5ec095 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,6 +20,8 @@
     "eslint-plugin-vue": "^9.17.0",
     "postcss": "^8.4.30",
     "postcss-import": "^12.0.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5",
     "vite-plugin-eslint": "^1.8.1"
diff --git a/client/src/App.vue b/client/src/App.vue
index dcefdcf..f2dcc80 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="min-h-screen font-sans antialiased bg-blue-900">
+  <div id="app" class="min-h-screen bg-blue-900 font-sans antialiased">
     <SVGContainer />
     <NotificationsContainer />
     <RunesContainer />
diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index 77b77aa..b35e99c 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -21,11 +21,11 @@
 }
 
 ::selection {
-  @apply text-white bg-blue-1000;
+  @apply bg-blue-1000 text-white;
 }
 
 ::-moz-selection {
-  @apply text-white bg-blue-1000;
+  @apply bg-blue-1000 text-white;
 }
 
 .min-w-1200 {
@@ -74,15 +74,15 @@ button:focus {
 
 /* Checkbox */
 .form-checkbox {
-  @apply w-6 h-6 border-blue-800 text-blue-1000 rounded-md;
+  @apply h-6 w-6 rounded-md border-blue-800 text-blue-1000;
   background: rgba(23, 49, 79, 0.6);
 }
 
 .form-checkbox:focus {
-  @apply bg-blue-1000 border-blue-700 outline-none;
+  @apply border-blue-700 bg-blue-1000 outline-none;
   box-shadow: none;
 }
 
 .form-checkbox:checked {
-  @apply bg-blue-1000 border-transparent;
+  @apply border-transparent bg-blue-1000;
 }
diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index f1cb7d8..ee25438 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -45,11 +45,11 @@
 
 /* Scale-fade transition */
 .scale-fade-enter-active {
-  @apply transition-all duration-75 ease-out transform;
+  @apply transform transition-all duration-75 ease-out;
 }
 
 .scale-fade-leave-active {
-  @apply transition-all duration-75 ease-in transform;
+  @apply transform transition-all duration-75 ease-in;
 }
 
 .scale-fade-enter,
diff --git a/client/src/components/Common/CubeLoader.vue b/client/src/components/Common/CubeLoader.vue
index f15b494..71c6fc7 100644
--- a/client/src/components/Common/CubeLoader.vue
+++ b/client/src/components/Common/CubeLoader.vue
@@ -4,10 +4,10 @@
     class="relative"
     style="transform: rotateZ(45deg)"
   >
-    <div class="relative float-left w-1/2 cube-1 cube h-1/2"></div>
-    <div class="relative float-left w-1/2 cube-2 cube h-1/2"></div>
-    <div class="relative float-left w-1/2 cube-4 cube h-1/2"></div>
-    <div class="relative float-left w-1/2 cube-3 cube h-1/2"></div>
+    <div class="cube-1 cube relative float-left h-1/2 w-1/2"></div>
+    <div class="cube-2 cube relative float-left h-1/2 w-1/2"></div>
+    <div class="cube-4 cube relative float-left h-1/2 w-1/2"></div>
+    <div class="cube-3 cube relative float-left h-1/2 w-1/2"></div>
   </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
 
 .cube:before {
   content: '';
-  @apply absolute top-0 left-0 w-full h-full bg-blue-300;
+  @apply absolute left-0 top-0 h-full w-full bg-blue-300;
   animation: cubeAngle 2.4s infinite linear both;
   transform-origin: 100% 100%;
 }
diff --git a/client/src/components/Common/DotsLoader.vue b/client/src/components/Common/DotsLoader.vue
index ae975bc..d7436b2 100644
--- a/client/src/components/Common/DotsLoader.vue
+++ b/client/src/components/Common/DotsLoader.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :style="{ width: width }" class="text-center spinner">
-    <div :style="dotStyle" class="inline-block rounded-full bounce1"></div>
-    <div :style="dotStyle" class="inline-block rounded-full bounce2"></div>
-    <div :style="dotStyle" class="inline-block rounded-full bounce3"></div>
+  <div :style="{ width: width }" class="spinner text-center">
+    <div :style="dotStyle" class="bounce1 inline-block rounded-full"></div>
+    <div :style="dotStyle" class="bounce2 inline-block rounded-full"></div>
+    <div :style="dotStyle" class="bounce3 inline-block rounded-full"></div>
   </div>
 </template>
 
diff --git a/client/src/components/Common/Ripple.vue b/client/src/components/Common/Ripple.vue
index 5df279c..4b7ed02 100644
--- a/client/src/components/Common/Ripple.vue
+++ b/client/src/components/Common/Ripple.vue
@@ -1,14 +1,14 @@
 <template>
-  <div ref="container" @mousedown="addRipple" class="relative overflow-hidden cursor-pointer">
+  <div ref="container" @mousedown="addRipple" class="relative cursor-pointer overflow-hidden">
     <transition-group
-      class="absolute top-0 left-0 w-full h-full pointer-events-none"
+      class="pointer-events-none absolute left-0 top-0 h-full w-full"
       name="grow"
       tag="div"
     >
       <div
         v-for="ripple in ripples"
         :key="ripple.id"
-        class="absolute w-full h-full rounded-full opacity-0 pointer-events-none"
+        class="pointer-events-none absolute h-full w-full rounded-full opacity-0"
         :style="{
           top: ripple.top,
           left: ripple.left,
diff --git a/client/src/components/Common/Tooltip.vue b/client/src/components/Common/Tooltip.vue
index a4814b6..367861e 100644
--- a/client/src/components/Common/Tooltip.vue
+++ b/client/src/components/Common/Tooltip.vue
@@ -17,7 +17,7 @@
       <div
         v-show="isOpen"
         ref="content"
-        class="bg-blue-1000 fixed z-50 py-2 rounded-md shadow"
+        class="fixed z-50 rounded-md bg-blue-1000 py-2 shadow"
         :style="{ ...position }"
       >
         <slot></slot>
diff --git a/client/src/components/Form/LoadingButton.vue b/client/src/components/Form/LoadingButton.vue
index d25cbe5..08c4289 100644
--- a/client/src/components/Form/LoadingButton.vue
+++ b/client/src/components/Form/LoadingButton.vue
@@ -7,18 +7,18 @@
     type="button"
   >
     <slot>Send</slot>
-    <span class="spinner absolute opacity-0 left-auto">
+    <span class="spinner absolute left-auto opacity-0">
       <span
-        class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
+        class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
       ></span>
       <span
-        class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
+        class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
       ></span>
       <span
-        class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
+        class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
       ></span>
       <span
-        class="inline-block absolute right-0 w-4 h-4 opacity-100 border-[3px] border-white rounded-full"
+        class="absolute right-0 inline-block h-4 w-4 rounded-full border-[3px] border-white opacity-100"
       ></span>
     </span>
   </button>
diff --git a/client/src/components/Form/SearchForm.vue b/client/src/components/Form/SearchForm.vue
index 846cf7f..43bec93 100644
--- a/client/src/components/Form/SearchForm.vue
+++ b/client/src/components/Form/SearchForm.vue
@@ -2,7 +2,7 @@
   <form
     @submit.prevent="formSubmit"
     :class="{ 'max-w-lg': !homepage }"
-    class="flex self-start w-full h-full text-lg text-teal-100"
+    class="flex h-full w-full self-start text-lg text-teal-100"
   >
     <div
       v-if="open"
@@ -17,7 +17,7 @@
         v-model="summoner"
         @focus="open = true"
         :class="dropdown ? 'bg-blue-1000' : 'input-color'"
-        class="relative z-30 w-full py-4 pl-6 pr-32 font-bold placeholder-teal-100 placeholder-opacity-75 rounded-lg outline-none focus:bg-blue-1000 summoner-input bypass-click"
+        class="summoner-input bypass-click relative z-30 w-full rounded-lg py-4 pl-6 pr-32 font-bold placeholder-teal-100 placeholder-opacity-75 outline-none focus:bg-blue-1000"
         spellcheck="false"
         type="text"
         placeholder="Search summoner"
@@ -25,21 +25,21 @@
       <button
         v-if="homepage"
         ref="submit"
-        class="absolute right-0 z-40 w-12 h-full hover:text-teal-200"
+        class="absolute right-0 z-40 h-full w-12 hover:text-teal-200"
         type="submit"
       >
-        <svg class="absolute w-4 h-4 vertical-center horizontal-center">
+        <svg class="vertical-center horizontal-center absolute h-4 w-4">
           <use xlink:href="#search" />
         </svg>
       </button>
       <button
         v-if="!homepage"
         @click="open = true"
-        class="w-full h-10 px-4 -mt-px text-base font-light text-left text-blue-200 rounded-md bg-blue-1000"
+        class="-mt-px h-10 w-full rounded-md bg-blue-1000 px-4 text-left text-base font-light text-blue-200"
         type="button"
       >
         <div class="flex items-center space-x-3">
-          <svg class="w-4 h-4">
+          <svg class="h-4 w-4">
             <use xlink:href="#search" />
           </svg>
           <span>Search summoner (Press "/" to focus)</span>
diff --git a/client/src/components/Form/SearchFormDropdown.vue b/client/src/components/Form/SearchFormDropdown.vue
index 6a1cc2c..2cf7671 100644
--- a/client/src/components/Form/SearchFormDropdown.vue
+++ b/client/src/components/Form/SearchFormDropdown.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     :class="homepage ? 'mt-2' : 'mt-1'"
-    class="absolute z-30 w-full bg-blue-800 rounded-lg shadow-md"
+    class="absolute z-30 w-full rounded-lg bg-blue-800 shadow-md"
   >
     <div class="shadow">
       <div class="pt-3">
-        <div v-if="!homepage" class="relative px-3 bypass-click">
-          <button class="absolute w-12 h-full text-blue-200 hover:text-white" type="submit">
-            <svg class="absolute w-4 h-4 vertical-center horizontal-center">
+        <div v-if="!homepage" class="bypass-click relative px-3">
+          <button class="absolute h-full w-12 text-blue-200 hover:text-white" type="submit">
+            <svg class="vertical-center horizontal-center absolute h-4 w-4">
               <use xlink:href="#search" />
             </svg>
           </button>
@@ -15,7 +15,7 @@
             ref="input"
             @input="$emit('input', $event.target.value)"
             :value="value"
-            class="w-full py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input"
+            class="summoner-input w-full rounded-md border border-blue-500 bg-blue-700 py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 outline-none focus:bg-blue-760"
             type="text"
             placeholder="Search summoner"
             spellcheck="false"
@@ -23,10 +23,10 @@
           <button
             v-if="!homepage && value.length"
             @click="$emit('input', '')"
-            class="absolute right-0 flex items-center justify-center p-1 mr-24 text-blue-200 rounded-full vertical-center hover:text-white"
+            class="vertical-center absolute right-0 mr-24 flex items-center justify-center rounded-full p-1 text-blue-200 hover:text-white"
             type="button"
           >
-            <svg class="w-4 h-4">
+            <svg class="h-4 w-4">
               <use xlink:href="#times" />
             </svg>
           </button>
@@ -36,12 +36,12 @@
         </div>
         <div
           :style="{ maxHeight: homepage ? '300px' : '480px' }"
-          class="px-3 pb-6 overflow-y-auto light-scrollbar"
+          class="light-scrollbar overflow-y-auto px-3 pb-6"
         >
           <div :class="{ 'mt-4': !homepage }">
             <div v-if="recentSearches.length" class="text-base text-blue-100">Recent</div>
             <div v-else-if="favorites.length === 0" class="flex items-center space-x-2">
-              <svg class="w-4 h-4 text-blue-100">
+              <svg class="h-4 w-4 text-blue-100">
                 <use xlink:href="#info" />
               </svg>
               <div class="text-base text-blue-100">Summoner example</div>
@@ -99,24 +99,24 @@
           </div>
         </div>
       </div>
-      <div class="px-4 py-4 bg-blue-1000 rounded-b-md">
-        <div class="flex items-center justify-between select-none text-xxs">
+      <div class="rounded-b-md bg-blue-1000 px-4 py-4">
+        <div class="flex select-none items-center justify-between text-xxs">
           <div class="space-x-2">
-            <span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">Enter</span>
+            <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">Enter</span>
             <span>to select</span>
           </div>
           <div class="space-x-2">
-            <span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key"
+            <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700"
               >&darr; &uarr;</span
             >
             <span>to navigate</span>
           </div>
           <div class="space-x-2">
-            <span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">Escape</span>
+            <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">Escape</span>
             <span>to close</span>
           </div>
           <div class="space-x-2">
-            <span class="text-xs font-medium text-blue-700 bg-blue-100 rounded-md key">CTRL K</span>
+            <span class="key rounded-md bg-blue-100 text-xs font-medium text-blue-700">CTRL K</span>
             <span>to open</span>
           </div>
         </div>
@@ -282,6 +282,9 @@ export default {
 <style scoped>
 .key {
   padding: 0.2rem 0.45rem;
-  box-shadow: 0 2px 0 0 #3182ce, 0 5px 3px 0 rgba(0, 0, 0, 0.1), 0 5px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 2px 0 0 #3182ce,
+    0 5px 3px 0 rgba(0, 0, 0, 0.1),
+    0 5px 2px 0 rgba(0, 0, 0, 0.06);
 }
 </style>
diff --git a/client/src/components/Form/SearchFormDropdownPlayer.vue b/client/src/components/Form/SearchFormDropdownPlayer.vue
index f3ed983..d436c59 100644
--- a/client/src/components/Form/SearchFormDropdownPlayer.vue
+++ b/client/src/components/Form/SearchFormDropdownPlayer.vue
@@ -4,19 +4,19 @@
     :to="{ name: 'summoner', params: { region: player.region, name: player.name } }"
     :title="player.name"
     :class="selected ? 'bg-blue-760' : 'bg-blue-900'"
-    class="flex items-center justify-between w-full px-4 py-3 mt-1 text-blue-200 rounded-md shadow-md cursor-pointer select-none bypass-click"
+    class="bypass-click mt-1 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-4 py-3 text-blue-200 shadow-md"
     role="option"
   >
     <div class="flex items-center">
-      <svg v-if="favoritesList" class="w-5 h-5 text-yellow-400">
+      <svg v-if="favoritesList" class="h-5 w-5 text-yellow-400">
         <use xlink:href="#star-outline" />
       </svg>
-      <svg v-else class="w-5 h-5">
+      <svg v-else class="h-5 w-5">
         <use xlink:href="#time" />
       </svg>
       <div class="w-20">
         <div
-          class="inline-flex px-2 py-1 ml-6 text-xs font-semibold text-white uppercase bg-blue-800 rounded"
+          class="ml-6 inline-flex rounded bg-blue-800 px-2 py-1 text-xs font-semibold uppercase text-white"
         >
           {{ player.region }}
         </div>
@@ -25,7 +25,7 @@
         :style="{
           backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`,
         }"
-        class="w-6 h-6 ml-2 bg-center bg-cover rounded-full"
+        class="ml-2 h-6 w-6 rounded-full bg-cover bg-center"
       ></div>
       <div class="ml-2 text-base">{{ player.name }}</div>
     </div>
@@ -33,17 +33,17 @@
       <button
         v-if="!favoritesList"
         @click.prevent="favoriteClick"
-        class="flex items-center justify-center p-2 rounded-full hover:text-yellow-400 hover:bg-blue-700"
+        class="flex items-center justify-center rounded-full p-2 hover:bg-blue-700 hover:text-yellow-400"
       >
-        <svg class="w-4 h-4">
+        <svg class="h-4 w-4">
           <use xlink:href="#star" />
         </svg>
       </button>
       <button
         @click.prevent="closeClick"
-        class="p-2 rounded-full cursor-pointerhover:text-white hover:bg-blue-700"
+        class="cursor-pointerhover:text-white rounded-full p-2 hover:bg-blue-700"
       >
-        <svg class="w-4 h-4">
+        <svg class="h-4 w-4">
           <use xlink:href="#times" />
         </svg>
       </button>
diff --git a/client/src/components/Form/SearchFormRegion.vue b/client/src/components/Form/SearchFormRegion.vue
index 82c257d..e319736 100644
--- a/client/src/components/Form/SearchFormRegion.vue
+++ b/client/src/components/Form/SearchFormRegion.vue
@@ -2,15 +2,15 @@
   <div>
     <div
       :class="[homepage ? 'mr-12' : 'mr-4']"
-      class="absolute right-0 z-30 flex items-center h-full vertical-center"
+      class="vertical-center absolute right-0 z-30 flex h-full items-center"
     >
       <div
         @click="toggle"
         :class="[selectRegionClasses]"
-        class="flex items-center transition duration-150 ease-in-out border-2 border-transparent rounded cursor-pointer hover:text-white"
+        class="flex cursor-pointer items-center rounded border-2 border-transparent transition duration-150 ease-in-out hover:text-white"
       >
-        <span class="font-bold uppercase select-none selected">{{ selectedRegion }}</span>
-        <svg class="w-4 h-4 ml-1 -mr-1">
+        <span class="selected select-none font-bold uppercase">{{ selectedRegion }}</span>
+        <svg class="-mr-1 ml-1 h-4 w-4">
           <use xlink:href="#caret-down" />
         </svg>
       </div>
@@ -19,18 +19,18 @@
       <div
         v-show="dropdown"
         :class="[dropdownClasses]"
-        class="absolute right-0 z-30 text-white shadow cursor-pointer"
+        class="absolute right-0 z-30 cursor-pointer text-white shadow"
       >
         <div
           v-for="(region, index) in regions"
           :key="region"
           @click="selectRegion(region)"
           :class="classRegions(index)"
-          class="relative py-1 pl-5 pr-2 text-xs text-right select-none bg-blue-1000 hover:bg-blue-800"
+          class="relative select-none bg-blue-1000 py-1 pl-5 pr-2 text-right text-xs hover:bg-blue-800"
         >
           <svg
             v-if="region.toLowerCase() === selectedRegion"
-            class="absolute w-3 h-3 fill-current vertical-center offsetIcon"
+            class="vertical-center offsetIcon absolute h-3 w-3 fill-current"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 512 512"
           >
diff --git a/client/src/components/Form/SwitchToggle.vue b/client/src/components/Form/SwitchToggle.vue
index c0d81ea..f3bef61 100644
--- a/client/src/components/Form/SwitchToggle.vue
+++ b/client/src/components/Form/SwitchToggle.vue
@@ -1,34 +1,34 @@
 <template>
-  <div class="relative z-10 text-sm leading-tight text-teal-400 select-none switch">
+  <div class="switch relative z-10 select-none text-sm leading-tight text-teal-400">
     <input
       v-model="selected"
       id="toggle-on"
-      class="hidden toggle toggle-left"
+      class="toggle toggle-left hidden"
       :value="true"
       type="radio"
     />
     <label
       :class="{ 'selected-label': selected }"
       for="toggle-on"
-      class="inline-block py-1 border-t-2 border-b-2 border-l-2 border-r border-teal-500 rounded-l-full cursor-pointer"
+      class="inline-block cursor-pointer rounded-l-full border-b-2 border-l-2 border-r border-t-2 border-teal-500 py-1"
       >{{ leftLabel }}</label
     >
     <input
       v-model="selected"
       id="toggle-off"
-      class="hidden toggle toggle-right"
+      class="toggle toggle-right hidden"
       :value="false"
       type="radio"
     />
     <label
       :class="{ 'selected-label': !selected }"
       for="toggle-off"
-      class="inline-block py-1 border-t-2 border-b-2 border-l border-r-2 border-teal-500 rounded-r-full cursor-pointer"
+      class="inline-block cursor-pointer rounded-r-full border-b-2 border-l border-r-2 border-t-2 border-teal-500 py-1"
       >{{ rightLabel }}</label
     >
     <div
       :class="selected ? 'left-checked' : 'right-checked'"
-      class="absolute inset-0 w-1/2 bg-teal-500 selector"
+      class="selector absolute inset-0 w-1/2 bg-teal-500"
     ></div>
   </div>
 </template>
diff --git a/client/src/components/Global/PopupNotification.vue b/client/src/components/Global/PopupNotification.vue
index 90fa08f..a1f6ca1 100644
--- a/client/src/components/Global/PopupNotification.vue
+++ b/client/src/components/Global/PopupNotification.vue
@@ -5,14 +5,14 @@
         'bg-red-500': notification.type === 'error',
         'bg-green-500': notification.type === 'success',
       }"
-      class="relative p-6 pr-10 mt-2 text-white rounded-lg shadow-md"
+      class="relative mt-2 rounded-lg p-6 pr-10 text-white shadow-md"
       style="min-width: 240px"
     >
       <button
         @click="deleteNotification"
-        class="absolute top-0 right-0 block px-1 py-1 mx-1 my-1 border border-transparent rounded-full cursor-pointer focus:outline-none hover:border-white"
+        class="absolute right-0 top-0 mx-1 my-1 block cursor-pointer rounded-full border border-transparent px-1 py-1 hover:border-white focus:outline-none"
       >
-        <svg class="w-3 h-3 fill-current" viewBox="0 0 20 20">
+        <svg class="h-3 w-3 fill-current" viewBox="0 0 20 20">
           <path
             d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
           />
diff --git a/client/src/components/Layout/MainFooter.vue b/client/src/components/Layout/MainFooter.vue
index a193358..5562e15 100644
--- a/client/src/components/Layout/MainFooter.vue
+++ b/client/src/components/Layout/MainFooter.vue
@@ -1,7 +1,7 @@
 <template>
-  <footer class="pt-20 pb-4 text-blue-200">
+  <footer class="pb-4 pt-20 text-blue-200">
     <p
-      class="absolute leading-tight text-center pointer-events-none horizontal-center text-xxs"
+      class="horizontal-center pointer-events-none absolute text-center text-xxs leading-tight"
       style="color: #5d80af"
     >
       LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
@@ -130,7 +130,7 @@
         </a>
       </p>
       <a
-        class="relative text-sm github"
+        class="github relative text-sm"
         href="https://github.com/vkaelin/LeagueStats"
         target="_blank"
       >
diff --git a/client/src/components/Match/DetailedMatch.vue b/client/src/components/Match/DetailedMatch.vue
index e4a1678..fc64e6f 100644
--- a/client/src/components/Match/DetailedMatch.vue
+++ b/client/src/components/Match/DetailedMatch.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="slide">
-    <div v-if="data.status === 'loaded' && detailsOpen" class="bg-blue-800 rounded-b-lg">
+    <div v-if="data.status === 'loaded' && detailsOpen" class="rounded-b-lg bg-blue-800">
       <DetailedMatchTeam
         :data="allyTeam"
         :all-players="[...allyTeam.players, ...enemyTeam.players]"
@@ -28,7 +28,7 @@
       />
     </div>
     <div v-else-if="data.status === 'loading' && detailsOpen">
-      <div class="py-5 bg-blue-800 rounded-b-lg">
+      <div class="rounded-b-lg bg-blue-800 py-5">
         <CubeLoader />
       </div>
     </div>
diff --git a/client/src/components/Match/DetailedMatchGlobalStats.vue b/client/src/components/Match/DetailedMatchGlobalStats.vue
index b2f4cd1..964b572 100644
--- a/client/src/components/Match/DetailedMatchGlobalStats.vue
+++ b/client/src/components/Match/DetailedMatchGlobalStats.vue
@@ -10,30 +10,30 @@
         <template #trigger>
           <div
             :class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
-            class="relative border-2 rounded-full cursor-pointer ban"
+            class="ban relative cursor-pointer rounded-full border-2"
           >
             <div
               :style="[ban.champion.id ? { backgroundImage: `url('${ban.champion.icon}')` } : '']"
-              class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
+              class="ban-img h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
             ></div>
             <div
               :class="[textLightColor, bgColor]"
-              class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
+              class="ban-order absolute flex h-4 w-4 items-center justify-center rounded-full text-xs font-bold"
             >
               {{ ban.pickTurn }}
             </div>
           </div>
         </template>
         <template #default>
-          <div class="px-2 text-xs leading-tight text-center text-white select-none">
+          <div class="select-none px-2 text-center text-xs leading-tight text-white">
             <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
           </div>
         </template>
       </Tooltip>
     </div>
     <div
-      :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
-      class="flex mt-2 leading-tight"
+      :class="allyTeam ? 'text-left' : 'flex-row-reverse text-right'"
+      class="mt-2 flex leading-tight"
     >
       <div>
         <div :class="textColor" class="text-sm font-medium">
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index b60d719..0b9b7c5 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -1,14 +1,14 @@
 <template>
   <table
-    :class="[{ 'rounded-b-lg overflow-hidden': !allyTeam }, data.result]"
+    :class="[{ 'overflow-hidden rounded-b-lg': !allyTeam }, data.result]"
     class="w-full table-fixed"
   >
-    <thead class="leading-none heading-detailed">
+    <thead class="heading-detailed leading-none">
       <tr
         :style="getHeadingColor(data.result)"
-        class="relative font-semibold text-blue-200 heading-row"
+        class="heading-row relative font-semibold text-blue-200"
       >
-        <th class="py-5 w-players">
+        <th class="w-players py-5">
           <div class="flex justify-between">
             <span :class="allyTeam ? 'text-teal-400' : 'text-red-400'" class="pl-2"
               >{{ allyTeam ? 'Ally' : 'Enemy' }} Team</span
@@ -18,41 +18,41 @@
               :class="allyTeam ? 'text-teal-400' : 'text-red-400'"
               class="flex pr-2"
             >
-              <svg class="items-center w-4 h-4">
+              <svg class="h-4 w-4 items-center">
                 <use xlink:href="#award" />
               </svg>
               <span class="ml-0.5">VICTORY</span>
             </div>
           </div>
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-kda">K</th>
-        <th class="px-2 py-5 text-sm font-medium w-kda">D</th>
-        <th class="px-2 py-5 text-sm font-medium w-kda">A</th>
-        <th class="px-2 py-5 text-sm font-medium w-minions">
+        <th class="w-kda px-2 py-5 text-sm font-medium">K</th>
+        <th class="w-kda px-2 py-5 text-sm font-medium">D</th>
+        <th class="w-kda px-2 py-5 text-sm font-medium">A</th>
+        <th class="w-minions px-2 py-5 text-sm font-medium">
           {{ statsFormat === 'stats' ? 'Cs' : 'Cs/m' }}
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-vision">
+        <th class="w-vision px-2 py-5 text-sm font-medium">
           {{ statsFormat === 'stats' ? 'Vs' : 'Vs/m' }}
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">Gold</th>
-        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
+        <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">Gold</th>
+        <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
           Dmg
           <br />champ
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
+        <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
           Dmg
           <br />obj
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">
+        <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">
           Dmg
           <br />taken
         </th>
-        <th class="px-2 py-5 text-sm font-medium w-gold-dmg-kp">KP</th>
+        <th class="w-gold-dmg-kp px-2 py-5 text-sm font-medium">KP</th>
       </tr>
     </thead>
     <tbody :class="{ 'border-b border-blue-700': allyTeam }" class="leading-none">
       <tr v-for="(player, index) in data.players" :key="player.name + index">
-        <td class="py-2 border-r border-blue-700">
+        <td class="border-r border-blue-700 py-2">
           <div class="flex justify-between px-1">
             <div class="flex">
               <div class="flex items-center">
@@ -61,21 +61,21 @@
                   :style="{
                     backgroundImage: `url(${'img/roles/' + player.role + '.png'})`,
                   }"
-                  class="w-4 h-4 bg-center bg-cover"
+                  class="h-4 w-4 bg-cover bg-center"
                 ></div>
               </div>
               <div
                 :style="{ backgroundImage: `url('${player.champion.icon}')` }"
-                class="relative w-8 h-8 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
+                class="relative ml-2 h-8 w-8 rounded-full bg-blue-1000 bg-cover bg-center"
               >
                 <div
                   :class="allyTeam ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100'"
-                  class="absolute bottom-0 flex items-center justify-center w-4 h-4 rounded-full level-position text-xxs"
+                  class="level-position absolute bottom-0 flex h-4 w-4 items-center justify-center rounded-full text-xxs"
                 >
                   <span>{{ player.level }}</span>
                 </div>
               </div>
-              <div class="flex flex-col justify-around ml-1">
+              <div class="ml-1 flex flex-col justify-around">
                 <Tooltip>
                   <template #trigger>
                     <div
@@ -85,16 +85,16 @@
                         })`,
                       }"
                       :class="{ 'cursor-pointer': player.summonerSpell1 }"
-                      class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
+                      class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
                     ></div>
                   </template>
                   <template v-if="player.summonerSpell1" #default>
-                    <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
+                    <div class="flex max-w-sm select-none p-2 text-left text-xs text-white">
                       <div
                         :style="{
                           backgroundImage: `url('${player.summonerSpell1.icon}')`,
                         }"
-                        class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
+                        class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
                       ></div>
                       <div class="ml-2 leading-tight">
                         <div class="text-base leading-none">
@@ -116,16 +116,16 @@
                         })`,
                       }"
                       :class="{ 'cursor-pointer': player.summonerSpell2 }"
-                      class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
+                      class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
                     ></div>
                   </template>
                   <template v-if="player.summonerSpell2" #default>
-                    <div class="flex max-w-sm p-2 text-xs text-left text-white select-none">
+                    <div class="flex max-w-sm select-none p-2 text-left text-xs text-white">
                       <div
                         :style="{
                           backgroundImage: `url('${player.summonerSpell2.icon}')`,
                         }"
-                        class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
+                        class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
                       ></div>
                       <div class="ml-2 leading-tight">
                         <div class="text-base leading-none">
@@ -144,7 +144,7 @@
                   <div
                     @click="selectRunes(player)"
                     :class="{ 'cursor-pointer': player.perks }"
-                    class="flex flex-col justify-around cursor-pointer ml-0.5"
+                    class="ml-0.5 flex cursor-pointer flex-col justify-around"
                   >
                     <div
                       :style="[
@@ -154,7 +154,7 @@
                             }
                           : '',
                       ]"
-                      class="w-4 h-4 rounded-md bg-blue-1000"
+                      class="h-4 w-4 rounded-md bg-blue-1000"
                     ></div>
                     <div
                       :style="[
@@ -164,18 +164,18 @@
                             }
                           : '',
                       ]"
-                      class="w-4 h-4 rounded-md bg-blue-1000"
+                      class="h-4 w-4 rounded-md bg-blue-1000"
                     ></div>
                   </div>
                 </template>
                 <template v-if="player.perks" #default>
-                  <div class="px-2 text-sm leading-relaxed text-center text-white select-none">
+                  <div class="select-none px-2 text-center text-sm leading-relaxed text-white">
                     <p>Click to display</p>
                     <p class="font-bold text-teal-400">full runes</p>
                   </div>
                 </template>
               </Tooltip>
-              <div class="flex flex-col items-start justify-center ml-1 leading-none">
+              <div class="ml-1 flex flex-col items-start justify-center leading-none">
                 <router-link
                   v-if="player.summonerSpell1"
                   :to="{
@@ -185,33 +185,33 @@
                   :class="{
                     'font-semibold text-yellow-400': account.id === player.summonerId,
                   }"
-                  class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow hover:text-blue-200"
+                  class="text-overflow w-[5.5rem] overflow-hidden whitespace-nowrap text-left text-xs text-white hover:text-blue-200"
                   >{{ player.name }}</router-link
                 >
                 <div
                   v-else
-                  class="overflow-hidden text-xs text-left text-white whitespace-nowrap w-[5.5rem] text-overflow"
+                  class="text-overflow w-[5.5rem] overflow-hidden whitespace-nowrap text-left text-xs text-white"
                 >
                   {{ player.name }}
                 </div>
-                <div class="text-teal-500 text-xxs">
+                <div class="text-xxs text-teal-500">
                   {{ player.champion.name }}
                 </div>
               </div>
             </div>
             <div class="flex items-center">
               <div v-if="player.rank">
-                <svg class="w-5 h-5 ml-auto">
+                <svg class="ml-auto h-5 w-5">
                   <use :xlink:href="`#rank-${player.rank.tier.toLowerCase()}`" />
                 </svg>
-                <div class="text-blue-300 text-xxs">
+                <div class="text-xxs text-blue-300">
                   {{ player.rank.shortName }}
                 </div>
               </div>
               <div v-else-if="!ranksLoaded">
                 <DotsLoader width="30px" dot-width="10px" />
               </div>
-              <div v-else class="w-5 h-5">
+              <div v-else class="h-5 w-5">
                 <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
               <MatchItems :items="player.items" :one-row="true" />
diff --git a/client/src/components/Match/LiveMatch.vue b/client/src/components/Match/LiveMatch.vue
index 123e4e7..741b9e0 100644
--- a/client/src/components/Match/LiveMatch.vue
+++ b/client/src/components/Match/LiveMatch.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex ml-4 overflow-hidden text-sm rounded-lg">
-    <div class="relative flex justify-between w-full overflow-hidden bg-blue-800 rounded-lg">
-      <div class="absolute flex flex-col items-center justify-between h-full horizontal-center">
+  <div class="ml-4 flex overflow-hidden rounded-lg text-sm">
+    <div class="relative flex w-full justify-between overflow-hidden rounded-lg bg-blue-800">
+      <div class="horizontal-center absolute flex h-full flex-col items-center justify-between">
         <div class="text-base leading-loose text-blue-200">{{ gamemode.name }}</div>
-        <div class="flex flex-col text-2xl font-bold leading-none vs">
+        <div class="vs flex flex-col text-2xl font-bold leading-none">
           <span>V</span>
-          <span class="ml-4 -mt-3">S</span>
+          <span class="-mt-3 ml-4">S</span>
         </div>
         <div :class="{ 'w-10': displayStartTime !== 'Not started yet' }" class="pb-2 text-blue-200">
           {{ displayStartTime }}
@@ -22,7 +22,7 @@
             :style="{
               backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${ally.championId}.png')`,
             }"
-            class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
+            class="h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
           ></div>
           <router-link
             v-if="!ally.bot"
@@ -56,7 +56,7 @@
             :style="{
               backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${enemy.championId}.png')`,
             }"
-            class="w-6 h-6 ml-2 bg-center bg-cover rounded-full bg-blue-1000"
+            class="ml-2 h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
           ></div>
         </li>
       </ul>
@@ -66,10 +66,10 @@
         name: 'summonerLive',
         params: { region: $route.params.region, name: $route.params.name },
       }"
-      class="flex items-center pl-6 pr-4 -ml-2 text-base text-blue-200 cursor-pointer live-game-link bg-gradient-x hover:bg-blue-800 hover:text-blue-100"
+      class="live-game-link bg-gradient-x -ml-2 flex cursor-pointer items-center pl-6 pr-4 text-base text-blue-200 hover:bg-blue-800 hover:text-blue-100"
     >
       <div class="-mt-0.5">more</div>
-      <svg class="w-4 h-4 ml-1 transition-transform duration-200 ease-in-out transform">
+      <svg class="ml-1 h-4 w-4 transform transition-transform duration-200 ease-in-out">
         <use xlink:href="#arrow-right" />
       </svg>
     </router-link>
@@ -102,7 +102,9 @@ export default {
 }
 
 .vs {
-  text-shadow: 3px 2px 0px rgba(49, 130, 206, 0.8), -3px 2px 0px rgba(229, 62, 62, 0.8);
+  text-shadow:
+    3px 2px 0px rgba(49, 130, 206, 0.8),
+    -3px 2px 0px rgba(229, 62, 62, 0.8);
 }
 
 .live-game-link:hover svg {
diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index b6e22d1..8c85f60 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -8,19 +8,19 @@
         showDetails ? 'rounded-t-lg' : 'rounded-lg',
         { 'mt-4': indexMatch !== 0 },
       ]"
-      class="relative text-base text-white bg-blue-800 cursor-pointer match hover:shadow-xl"
+      class="match relative cursor-pointer bg-blue-800 text-base text-white hover:shadow-xl"
     >
       <div class="relative flex flex-wrap px-5 py-3">
         <div
           v-if="data.newMatch"
-          class="absolute top-0 right-0 px-2 rounded-full new-match text-xxs"
+          class="new-match absolute right-0 top-0 rounded-full px-2 text-xxs"
           style="margin: 0.35rem 0.35rem 0 0; background-color: rgba(99, 179, 237, 0.2)"
         >
           New
         </div>
-        <div class="w-4/12 text-left first">
+        <div class="first w-4/12 text-left">
           <div>
-            <div class="h-6 text-lg font-extrabold leading-none text-teal-500 uppercase">
+            <div class="h-6 text-lg font-extrabold uppercase leading-none text-teal-500">
               {{ data.champion.name }}
             </div>
 
@@ -29,36 +29,36 @@
                 <div
                   v-if="data.role !== 'NONE'"
                   :style="{ backgroundImage: `url(${'/img/roles/' + data.role + '.png'})` }"
-                  class="w-10 h-10 bg-center bg-cover"
+                  class="h-10 w-10 bg-cover bg-center"
                 ></div>
-                <div class="w-10 text-xs font-extrabold text-center text-teal-500">
+                <div class="w-10 text-center text-xs font-extrabold text-teal-500">
                   LVL {{ data.level }}
                 </div>
               </div>
               <div
                 :style="{ backgroundImage: `url('${data.champion.icon}')` }"
-                class="w-16 h-16 ml-2 rounded-lg crop-champion bg-blue-1000"
+                class="crop-champion ml-2 h-16 w-16 rounded-lg bg-blue-1000"
               ></div>
-              <div class="flex flex-col justify-around ml-2">
+              <div class="ml-2 flex flex-col justify-around">
                 <div
                   v-if="data.summonerSpell1"
                   :style="{ backgroundImage: `url(${data.summonerSpell1.icon})` }"
-                  class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
+                  class="h-6 w-6 rounded-md bg-blue-1000 bg-cover bg-center"
                 ></div>
-                <div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div>
+                <div v-else class="h-6 w-6 rounded-md bg-blue-1000"></div>
                 <div
                   v-if="data.summonerSpell2"
                   :style="{ backgroundImage: `url(${data.summonerSpell2.icon})` }"
-                  class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
+                  class="h-6 w-6 rounded-md bg-blue-1000 bg-cover bg-center"
                 ></div>
-                <div v-else class="w-6 h-6 rounded-md bg-blue-1000"></div>
+                <div v-else class="h-6 w-6 rounded-md bg-blue-1000"></div>
               </div>
-              <div class="flex flex-col justify-around ml-1">
+              <div class="ml-1 flex flex-col justify-around">
                 <div
                   :style="[
                     data.primaryRune ? { background: `url(${data.primaryRune}) center/cover` } : '',
                   ]"
-                  class="w-6 h-6 rounded-md bg-blue-1000"
+                  class="h-6 w-6 rounded-md bg-blue-1000"
                 ></div>
                 <div
                   :style="[
@@ -66,10 +66,10 @@
                       ? { background: `url(${data.secondaryRune}) center/cover` }
                       : '',
                   ]"
-                  class="w-6 h-6 rounded-md bg-blue-1000"
+                  class="h-6 w-6 rounded-md bg-blue-1000"
                 ></div>
               </div>
-              <div class="flex flex-col items-center justify-center mx-auto leading-none">
+              <div class="mx-auto flex flex-col items-center justify-center leading-none">
                 <div class="text-xl font-extrabold text-teal-500">
                   <span class>{{ data.stats.kills }}</span>
                   <span class>/</span>
@@ -84,14 +84,14 @@
             </div>
 
             <div
-              class="relative z-30 flex items-end h-6 text-sm font-extrabold leading-none text-white"
+              class="relative z-30 flex h-6 items-end text-sm font-extrabold leading-none text-white"
             >
               {{ data.gamemode.name }}
             </div>
           </div>
         </div>
 
-        <div class="flex items-center w-3/12 py-6 second">
+        <div class="second flex w-3/12 items-center py-6">
           <MatchItems :items="data.items" />
 
           <div class="relative z-30 ml-4 leading-none">
@@ -108,29 +108,29 @@
               <svg style="width: 15px; height: 15px">
                 <use xlink:href="#gold" />
               </svg>
-              <div class="ml-1 text-sm font-bold gold">{{ data.stats.gold | kilo }}</div>
+              <div class="gold ml-1 text-sm font-bold">{{ data.stats.gold | kilo }}</div>
             </div>
             <div class="flex items-center">
               <svg style="width: 15px; height: 15px">
                 <use xlink:href="#damage" />
               </svg>
-              <div class="ml-1 text-sm font-bold damage">{{ data.stats.dmgChamp | kilo }}</div>
+              <div class="damage ml-1 text-sm font-bold">{{ data.stats.dmgChamp | kilo }}</div>
             </div>
             <div class="flex items-center">
               <svg style="width: 15px; height: 15px">
                 <use xlink:href="#kill-participation" />
               </svg>
-              <div class="ml-1 text-sm font-bold kp">{{ data.stats.kp | percent }}</div>
+              <div class="kp ml-1 text-sm font-bold">{{ data.stats.kp | percent }}</div>
             </div>
           </div>
         </div>
 
-        <div class="flex items-center w-5/12 py-1 third">
+        <div class="third flex w-5/12 items-center py-1">
           <div v-if="data.allyTeam.length > 1">
             <div
               v-for="(ally, index) in data.allyTeam"
               :key="'player-' + index"
-              class="flex items-center ml-4 leading-none"
+              class="ml-4 flex items-center leading-none"
             >
               <router-link
                 v-if="ally.account_id !== '0' && account.accountId !== ally.account_id"
@@ -140,32 +140,32 @@
                   params: { region: $route.params.region, name: ally.name },
                 }"
                 :class="isSummonerProfile(ally.account_id)"
-                class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap hover:text-white text-overflow"
+                class="text-overflow w-16 overflow-hidden whitespace-nowrap text-right text-xs font-medium hover:text-white"
                 >{{ ally.name }}</router-link
               >
               <div
                 v-else
                 :class="isSummonerProfile(ally.account_id)"
-                class="w-16 overflow-hidden text-xs font-medium text-right whitespace-nowrap text-overflow"
+                class="text-overflow w-16 overflow-hidden whitespace-nowrap text-right text-xs font-medium"
               >
                 {{ ally.name }}
               </div>
               <div
                 :class="index !== 0 ? '-mt-1' : ''"
                 :style="{ backgroundImage: `url('${ally.champion.icon}')` }"
-                class="w-6 h-6 ml-1 overflow-hidden bg-center bg-cover rounded-full bg-blue-1000"
+                class="ml-1 h-6 w-6 overflow-hidden rounded-full bg-blue-1000 bg-cover bg-center"
               ></div>
               <div
                 :style="{
                   backgroundImage:
                     data.role !== 'NONE' ? `url(${'/img/roles/' + roles[index] + '.png'})` : null,
                 }"
-                class="w-4 h-4 mx-2 bg-center bg-cover"
+                class="mx-2 h-4 w-4 bg-cover bg-center"
               ></div>
               <div
                 :class="index !== 0 ? '-mt-1' : ''"
                 :style="{ backgroundImage: `url('${data.enemyTeam[index].champion.icon}')` }"
-                class="w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
+                class="h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
               ></div>
               <router-link
                 v-if="data.enemyTeam[index].account_id !== '0'"
@@ -174,19 +174,19 @@
                   name: 'summoner',
                   params: { region: $route.params.region, name: data.enemyTeam[index].name },
                 }"
-                class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap hover:text-white text-overflow"
+                class="text-overflow ml-1 w-16 overflow-hidden whitespace-nowrap text-left text-xs font-medium text-blue-200 hover:text-white"
                 >{{ data.enemyTeam[index].name }}</router-link
               >
               <div
                 v-else
-                class="w-16 ml-1 overflow-hidden text-xs font-medium text-left text-blue-200 whitespace-nowrap text-overflow"
+                class="text-overflow ml-1 w-16 overflow-hidden whitespace-nowrap text-left text-xs font-medium text-blue-200"
               >
                 {{ data.enemyTeam[index].name }}
               </div>
             </div>
           </div>
-          <div class="flex flex-col items-center justify-center ml-auto">
-            <svg class="w-5 h-5 text-blue-200">
+          <div class="ml-auto flex flex-col items-center justify-center">
+            <svg class="h-5 w-5 text-blue-200">
               <use xlink:href="#stopwatch" />
             </svg>
             <div class="text-lg font-medium text-teal-400">{{ data.time | secToTime }}</div>
@@ -195,8 +195,8 @@
                 <div class="text-xs font-medium text-white">{{ data.date }}</div>
               </template>
               <template #default>
-                <div class="px-2 text-xs leading-tight text-center text-white select-none">
-                  <svg class="w-4 h-4 mx-auto text-teal-400">
+                <div class="select-none px-2 text-center text-xs leading-tight text-white">
+                  <svg class="mx-auto h-4 w-4 text-teal-400">
                     <use xlink:href="#time" />
                   </svg>
                   <div class="mt-1">{{ data.fullDate.date }}</div>
diff --git a/client/src/components/Match/MatchItems.vue b/client/src/components/Match/MatchItems.vue
index a772e1a..e9011aa 100644
--- a/client/src/components/Match/MatchItems.vue
+++ b/client/src/components/Match/MatchItems.vue
@@ -6,25 +6,25 @@
           <div
             :style="{ backgroundImage: itemLink(item) }"
             :class="[
-              oneRow ? 'ml-0.5 w-6 h-6' : 'ml-1 w-8 h-8',
+              oneRow ? 'ml-0.5 h-6 w-6' : 'ml-1 h-8 w-8',
               { 'cursor-pointer': item !== null },
             ]"
-            class="relative z-10 bg-center bg-cover rounded-md bg-blue-1000"
+            class="relative z-10 rounded-md bg-blue-1000 bg-cover bg-center"
           >
-            <div v-if="isMythic(item)" class="w-full h-full rounded-md mythic-inside"></div>
+            <div v-if="isMythic(item)" class="mythic-inside h-full w-full rounded-md"></div>
           </div>
           <div
             v-if="isMythic(item)"
-            class="absolute rounded-md mythic"
+            class="mythic absolute rounded-md"
             :class="oneRow ? 'mythic-sm' : 'mythic-xl'"
           ></div>
         </div>
       </template>
       <template v-if="item !== null" #default>
-        <div class="flex max-w-md p-2 text-xs text-left text-white select-none">
+        <div class="flex max-w-md select-none p-2 text-left text-xs text-white">
           <div
             :style="{ backgroundImage: itemLink(item) }"
-            class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
+            class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
           ></div>
           <div class="ml-2 leading-none">
             <div class="text-base">{{ itemName(item.name) }}</div>
@@ -34,7 +34,7 @@
             </div>
             <div
               v-html="item.description"
-              class="mt-1 font-light text-blue-200 item-description"
+              class="item-description mt-1 font-light text-blue-200"
             ></div>
           </div>
         </div>
@@ -120,7 +120,7 @@ export default {
 }
 
 .item-description >>> stats {
-  @apply text-white leading-tight;
+  @apply leading-tight text-white;
 }
 
 .item-description >>> br + br {
@@ -132,21 +132,21 @@ export default {
 }
 
 .item-description >>> li {
-  @apply block mt-2;
+  @apply mt-2 block;
 }
 
 .item-description >>> passive {
-  @apply text-white font-normal;
+  @apply font-normal text-white;
 }
 
 .item-description >>> active {
-  @apply inline-block text-white font-bold mt-2;
+  @apply mt-2 inline-block font-bold text-white;
 }
 
 .item-description >>> unique,
 .item-description >>> li > passive:first-child,
 .item-description >>> rarityMythic {
-  @apply text-white font-bold block mt-2;
+  @apply mt-2 block font-bold text-white;
 }
 
 .item-description >>> font {
@@ -154,10 +154,10 @@ export default {
 }
 
 .item-description >>> rules {
-  @apply inline-block mt-2 text-blue-400 italic;
+  @apply mt-2 inline-block italic text-blue-400;
 }
 
 .item-description >>> rules active {
-  @apply inline text-white font-normal;
+  @apply inline font-normal text-white;
 }
 </style>
diff --git a/client/src/components/Match/Runes/RuneStyle.vue b/client/src/components/Match/Runes/RuneStyle.vue
index 971f9ea..530de8e 100644
--- a/client/src/components/Match/Runes/RuneStyle.vue
+++ b/client/src/components/Match/Runes/RuneStyle.vue
@@ -4,14 +4,14 @@
       :style="{
         backgroundImage: `url('${createCategoryBorderUrl(runeStyle.name)}')`,
       }"
-      class="flex items-center justify-center w-24 h-24 bg-cover"
+      class="flex h-24 w-24 items-center justify-center bg-cover"
     >
       <div
         :style="{
           backgroundImage: `url('${createCategoryUrl(runeStyle.name)}')`,
         }"
         style="filter: brightness(1.2)"
-        class="w-56 h-56 mt-4 bg-center bg-no-repeat bg-contain"
+        class="mt-4 h-56 w-56 bg-contain bg-center bg-no-repeat"
       ></div>
     </div>
 
@@ -26,22 +26,22 @@
                     backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
                   }"
                   :class="selectedRunes.selected.includes(runeId) ? 'used-rune' : 'not-used-rune'"
-                  class="w-12 h-12 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
+                  class="h-12 w-12 cursor-pointer rounded-full border-2 border-gray-700 bg-cover bg-center"
                 ></li>
               </template>
               <template #default>
-                <div class="flex max-w-md p-2 text-sm text-left text-white select-none">
+                <div class="flex max-w-md select-none p-2 text-left text-sm text-white">
                   <div
                     :style="{
                       backgroundImage: `url('${createCDragonAssetUrl(runes.perks[runeId].icon)}')`,
                     }"
-                    class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
+                    class="ml-1 h-12 w-12 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
                   ></div>
                   <div class="ml-2 leading-none">
                     <div class="text-base">{{ runes.perks[runeId].name }}</div>
                     <div
                       v-html="runes.perks[runeId].desc"
-                      class="mt-3 font-light leading-tight text-blue-200 rune-description"
+                      class="rune-description mt-3 font-light leading-tight text-blue-200"
                     ></div>
                   </div>
                 </div>
@@ -49,12 +49,12 @@
             </Tooltip>
           </ul>
         </div>
-        <div v-if="primary && index == 0" class="w-full mt-4 bg-gray-500 bg-opacity-25 h-0.5"></div>
+        <div v-if="primary && index == 0" class="mt-4 h-0.5 w-full bg-gray-500 bg-opacity-25"></div>
       </div>
 
       <div v-if="!primary">
         <div class="mt-8 space-y-4">
-          <div v-for="(row, index) in kStats" :key="`row-${index}`" class="flex px-3 space-x-8">
+          <div v-for="(row, index) in kStats" :key="`row-${index}`" class="flex space-x-8 px-3">
             <ul v-for="(kStat, i) in row" :key="`${kStat}-${i}`">
               <Tooltip>
                 <template #trigger>
@@ -65,22 +65,22 @@
                     :class="
                       selectedRunes.selected[index + 6] === kStat ? 'used-rune' : 'not-used-rune'
                     "
-                    class="w-8 h-8 bg-gray-900 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
+                    class="h-8 w-8 cursor-pointer rounded-full border-2 border-gray-700 bg-gray-900 bg-cover bg-center"
                   ></li>
                 </template>
                 <template #default>
-                  <div class="flex max-w-md p-2 text-sm text-left text-white select-none">
+                  <div class="flex max-w-md select-none p-2 text-left text-sm text-white">
                     <div
                       :style="{
                         backgroundImage: `url('${createCDragonAssetUrl(runes.perks[kStat].icon)}')`,
                       }"
-                      class="flex-shrink-0 w-8 h-8 ml-1 bg-center bg-cover rounded-md bg-blue-1000"
+                      class="ml-1 h-8 w-8 flex-shrink-0 rounded-md bg-blue-1000 bg-cover bg-center"
                     ></div>
                     <div class="ml-2 leading-none">
                       <div class="text-base">{{ runes.perks[kStat].name }}</div>
                       <div
                         v-html="runes.perks[kStat].desc"
-                        class="mt-3 font-light leading-tight text-blue-200 rune-description"
+                        class="rune-description mt-3 font-light leading-tight text-blue-200"
                       ></div>
                     </div>
                   </div>
diff --git a/client/src/components/Match/Runes/RunesContainer.vue b/client/src/components/Match/Runes/RunesContainer.vue
index 5866742..9851004 100644
--- a/client/src/components/Match/Runes/RunesContainer.vue
+++ b/client/src/components/Match/Runes/RunesContainer.vue
@@ -22,7 +22,7 @@
       >
         <div
           v-if="runesOpen"
-          class="relative overflow-hidden bg-gray-900 rounded-md shadow-lg"
+          class="relative overflow-hidden rounded-md bg-gray-900 shadow-lg"
           style="width: 800px; height: 500px"
         >
           <LazyBackground
@@ -33,7 +33,7 @@
             style="filter: blur(2px)"
           >
           </LazyBackground>
-          <div class="relative flex items-start h-full px-4 py-2">
+          <div class="relative flex h-full items-start px-4 py-2">
             <div class="w-1/2">
               <RuneStyle :primary="true" :rune-style="primaryStyle" />
             </div>
diff --git a/client/src/components/Summoner/Champions/ChampionsSearch.vue b/client/src/components/Summoner/Champions/ChampionsSearch.vue
index ba6e559..f7b1a0d 100644
--- a/client/src/components/Summoner/Champions/ChampionsSearch.vue
+++ b/client/src/components/Summoner/Champions/ChampionsSearch.vue
@@ -3,11 +3,11 @@
     <input
       v-model="championName"
       @input="search"
-      class="px-2 py-2 pl-10 rounded-lg outline-none input-color focus:bg-blue-1000"
+      class="input-color rounded-lg px-2 py-2 pl-10 outline-none focus:bg-blue-1000"
       type="text"
       placeholder="Search Champions"
     />
-    <svg class="absolute left-0 w-4 h-4 ml-3 vertical-center">
+    <svg class="vertical-center absolute left-0 ml-3 h-4 w-4">
       <use xlink:href="#search" />
     </svg>
   </Ripple>
diff --git a/client/src/components/Summoner/Champions/ChampionsTable.vue b/client/src/components/Summoner/Champions/ChampionsTable.vue
index 3f611ae..963f86e 100644
--- a/client/src/components/Summoner/Champions/ChampionsTable.vue
+++ b/client/src/components/Summoner/Champions/ChampionsTable.vue
@@ -1,11 +1,11 @@
 <template>
-  <table class="w-full leading-none text-center bg-blue-800 rounded-lg table-fixed">
+  <table class="w-full table-fixed rounded-lg bg-blue-800 text-center leading-none">
     <thead>
-      <tr class="text-sm rounded-t-lg select-none heading">
+      <tr class="heading select-none rounded-t-lg text-sm">
         <th
           @click="sortBy('index')"
           :class="sortedClasses('index')"
-          class="relative px-2 py-4 font-normal rounded-tl-lg cursor-pointer hover:bg-blue-700"
+          class="relative cursor-pointer rounded-tl-lg px-2 py-4 font-normal hover:bg-blue-700"
         >
           rank
         </th>
@@ -22,7 +22,7 @@
             },
             sortedClasses(heading.props),
           ]"
-          class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
+          class="relative cursor-pointer px-2 py-4 font-normal hover:bg-blue-700"
         ></th>
       </tr>
     </thead>
@@ -34,15 +34,15 @@
       >
         <td
           :class="{ 'rounded-bl-lg': index === championsToDisplay.length - 1 }"
-          class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table"
+          class="border-t-table relative bg-blue-800 px-2 py-3 text-sm text-white"
         >
           {{ champion.index + 1 }}
         </td>
-        <td class="relative px-2 py-3 text-sm text-white bg-blue-800 border-t-table">
+        <td class="border-t-table relative bg-blue-800 px-2 py-3 text-sm text-white">
           <div class="flex items-center">
             <div
               :style="{ backgroundImage: `url('${champion.champion.icon}')` }"
-              class="flex-shrink-0 w-6 h-6 bg-center bg-cover rounded-full bg-blue-1000"
+              class="h-6 w-6 flex-shrink-0 rounded-full bg-blue-1000 bg-cover bg-center"
             ></div>
             <div class="ml-2">{{ champion.champion.name }}</div>
           </div>
@@ -61,7 +61,7 @@
         </td>
         <td :style="bgColor(champion, 'kda')" class="px-2 py-3 text-sm text-white">
           <div>{{ champion.kda | round }}</div>
-          <div class="mt-1 text-blue-200 whitespace-nowrap text-xxs">
+          <div class="mt-1 whitespace-nowrap text-xxs text-blue-200">
             {{ (champion.kills / champion.count) | round(1) }}
             /
             {{ (champion.deaths / champion.count) | round(1) }}
diff --git a/client/src/components/Summoner/Champions/FilterQueue.vue b/client/src/components/Summoner/Champions/FilterQueue.vue
index c230458..2661cf0 100644
--- a/client/src/components/Summoner/Champions/FilterQueue.vue
+++ b/client/src/components/Summoner/Champions/FilterQueue.vue
@@ -3,7 +3,7 @@
     <select
       v-model="queue"
       @change="filterQueue"
-      class="block w-full px-4 py-2 pr-8 font-semibold capitalize bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
+      class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 px-4 py-2 pr-8 font-semibold capitalize hover:bg-blue-700 focus:outline-none"
       style="width: 144px"
     >
       <option v-for="key in Object.keys(choices)" :key="key" :value="key">
@@ -11,9 +11,9 @@
       </option>
     </select>
     <div
-      class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
+      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
     >
-      <svg class="w-5 h-5 text-white">
+      <svg class="h-5 w-5 text-white">
         <use xlink:href="#chevron-down" />
       </svg>
     </div>
diff --git a/client/src/components/Summoner/Champions/OnlyMostPlayed.vue b/client/src/components/Summoner/Champions/OnlyMostPlayed.vue
index f431b61..037d7ae 100644
--- a/client/src/components/Summoner/Champions/OnlyMostPlayed.vue
+++ b/client/src/components/Summoner/Champions/OnlyMostPlayed.vue
@@ -12,7 +12,7 @@
         <label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label>
       </template>
       <template #default>
-        <div class="px-2 text-xs text-center text-white">
+        <div class="px-2 text-center text-xs text-white">
           Hide champions with less than
           <br />
           <span class="font-bold text-teal-400">1% playrate</span>
diff --git a/client/src/components/Summoner/FilterSeason.vue b/client/src/components/Summoner/FilterSeason.vue
index e08bba1..14a5d72 100644
--- a/client/src/components/Summoner/FilterSeason.vue
+++ b/client/src/components/Summoner/FilterSeason.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="relative self-end inline-block leading-none text-blue-200 group">
+  <div class="group relative inline-block self-end leading-none text-blue-200">
     <select
       v-model="season"
       @change="filterSeason"
       dir="rtl"
-      class="block w-full px-4 pr-8 bg-transparent rounded-md appearance-none cursor-pointer focus:outline-none group-hover:text-white"
+      class="block w-full cursor-pointer appearance-none rounded-md bg-transparent px-4 pr-8 focus:outline-none group-hover:text-white"
     >
       <option :value="null" class="bg-blue-800">All seasons</option>
       <option v-for="(s, index) in sortedSeasons" :key="index" :value="s" class="bg-blue-800">
@@ -14,9 +14,9 @@
       </option>
     </select>
     <div
-      class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
+      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
     >
-      <svg class="w-4 h-4 text-blue-200 group-hover:text-white">
+      <svg class="h-4 w-4 text-blue-200 group-hover:text-white">
         <use xlink:href="#caret-down" />
       </svg>
     </div>
diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index 2e3d58a..fe8203c 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="px-5 py-4 mt-2 bg-blue-800 rounded-lg">
+  <div class="mt-2 rounded-lg bg-blue-800 px-5 py-4">
     <table
-      class="w-full leading-none text-center table-fixed"
+      class="w-full table-fixed text-center leading-none"
       style="border-collapse: separate; border-spacing: 0 0.5rem"
     >
       <thead>
         <tr class="text-left">
-          <th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="font-semibold w-team">
+          <th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="w-team font-semibold">
             {{ ally ? 'Ally' : 'Enemy' }} Team
           </th>
-          <th class="text-sm font-normal text-blue-200 w-ranked">SoloQ Stats</th>
-          <th class="text-sm font-normal text-blue-200 w-ranked">Flex Stats</th>
-          <th class="px-2 text-sm font-normal text-right text-blue-200 w-bans">Bans</th>
+          <th class="w-ranked text-sm font-normal text-blue-200">SoloQ Stats</th>
+          <th class="w-ranked text-sm font-normal text-blue-200">Flex Stats</th>
+          <th class="w-bans px-2 text-right text-sm font-normal text-blue-200">Bans</th>
         </tr>
       </thead>
       <tbody v-if="liveLoaded">
@@ -19,23 +19,23 @@
           v-for="(player, index) in team"
           :key="player.summonerId"
           :style="getCSSVars(player.championId)"
-          class="relative live-team-row"
+          class="live-team-row relative"
         >
-          <td class="py-1 pl-2 rounded-l-lg">
+          <td class="rounded-l-lg py-1 pl-2">
             <div class="flex items-center">
               <div
                 v-if="player.perks"
                 @click="selectRunes(player)"
                 :class="{ 'cursor-pointer': player.perks }"
-                class="flex flex-col items-center runes"
+                class="runes flex flex-col items-center"
               >
                 <div
                   :style="{ backgroundImage: `url('${getPrimarRune(player.perks)}')` }"
-                  class="w-6 h-6 bg-center bg-cover"
+                  class="h-6 w-6 bg-cover bg-center"
                 ></div>
                 <div
                   :style="{ backgroundImage: `url('${getSecondaryRune(player.perks)}')` }"
-                  class="w-3 h-3 mt-1 bg-center bg-cover"
+                  class="mt-1 h-3 w-3 bg-cover bg-center"
                 ></div>
               </div>
               <div v-else class="w-6"></div>
@@ -44,31 +44,31 @@
                   backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`,
                 }"
                 :class="borderChampion(player.summonerId)"
-                class="relative w-12 h-12 ml-2 bg-center bg-cover border-2 rounded-full bg-blue-1000"
+                class="relative ml-2 h-12 w-12 rounded-full border-2 bg-blue-1000 bg-cover bg-center"
               >
                 <div
                   v-if="player.role && player.role !== 'NONE'"
                   :class="borderChampion(player.summonerId)"
-                  class="absolute border rounded-full p-0.5 bg-blue-1000"
+                  class="absolute rounded-full border bg-blue-1000 p-0.5"
                   style="bottom: -5px; right: -5px"
                 >
                   <div
                     :style="{ backgroundImage: `url(${'/img/roles/' + player.role + '.png'})` }"
-                    class="w-4 h-4 bg-center bg-cover"
+                    class="h-4 w-4 bg-cover bg-center"
                   ></div>
                 </div>
               </div>
-              <div class="flex flex-col ml-2">
+              <div class="ml-2 flex flex-col">
                 <div
                   :style="{ backgroundImage: `url(${player.summonerSpell1.icon})` }"
-                  class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
+                  class="h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
                 ></div>
                 <div
                   :style="{ backgroundImage: `url(${player.summonerSpell2.icon})` }"
-                  class="w-4 h-4 mt-1 bg-center bg-cover rounded-md bg-blue-1000"
+                  class="mt-1 h-4 w-4 rounded-md bg-blue-1000 bg-cover bg-center"
                 ></div>
               </div>
-              <div class="ml-3 text-sm leading-tight text-left">
+              <div class="ml-3 text-left text-sm leading-tight">
                 <router-link
                   v-if="!player.bot"
                   :to="{
@@ -91,10 +91,10 @@
             <div class="px-2">
               <div v-if="player.rank.soloQ" class="flex items-center">
                 <div class="inline-block text-center">
-                  <svg class="w-5 h-5">
+                  <svg class="h-5 w-5">
                     <use :xlink:href="`#rank-${player.rank.soloQ.tier.toLowerCase()}`" />
                   </svg>
-                  <div class="text-xs font-semibold text-blue-300 mt-0.5">
+                  <div class="mt-0.5 text-xs font-semibold text-blue-300">
                     {{ player.rank.soloQ.shortName }}
                   </div>
                 </div>
@@ -105,7 +105,7 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="w-5 h-5">
+              <div v-else class="h-5 w-5">
                 <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
             </div>
@@ -114,10 +114,10 @@
             <div class="px-2">
               <div v-if="player.rank.flex5v5" class="flex items-center">
                 <div class="inline-block text-center">
-                  <svg class="w-5 h-5">
+                  <svg class="h-5 w-5">
                     <use :xlink:href="`#rank-${player.rank.flex5v5.tier.toLowerCase()}`" />
                   </svg>
-                  <div class="text-xs font-semibold text-blue-300 mt-0.5">
+                  <div class="mt-0.5 text-xs font-semibold text-blue-300">
                     {{ player.rank.flex5v5.shortName }}
                   </div>
                 </div>
@@ -128,17 +128,17 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="w-5 h-5">
+              <div v-else class="h-5 w-5">
                 <div class="-mt-1 text-2xl text-blue-300">-</div>
               </div>
             </div>
           </td>
-          <td class="py-1 text-right rounded-r-lg">
+          <td class="rounded-r-lg py-1 text-right">
             <div class="inline-block px-2">
               <div
                 v-if="live.bannedChampions.length"
                 :class="[ally ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
-                class="relative border-2 rounded-full ban"
+                class="ban relative rounded-full border-2"
               >
                 <div
                   :style="[
@@ -150,16 +150,16 @@
                         }
                       : '',
                   ]"
-                  class="w-6 h-6 bg-center bg-cover rounded-full ban-img bg-blue-1000"
+                  class="ban-img h-6 w-6 rounded-full bg-blue-1000 bg-cover bg-center"
                 ></div>
                 <div
-                  :class="[ally ? 'text-teal-100 bg-teal-500' : 'text-red-100 bg-red-500']"
-                  class="absolute flex items-center justify-center w-4 h-4 text-xs font-bold rounded-full ban-order"
+                  :class="[ally ? 'bg-teal-500 text-teal-100' : 'bg-red-500 text-red-100']"
+                  class="ban-order absolute flex h-4 w-4 items-center justify-center rounded-full text-xs font-bold"
                 >
                   {{ banChamp(index, player.teamId).pickTurn }}
                 </div>
               </div>
-              <div v-else class="w-5 h-5 text-left">
+              <div v-else class="h-5 w-5 text-left">
                 <div class="text-2xl text-blue-300">-</div>
               </div>
             </div>
diff --git a/client/src/components/Summoner/Overview/OverviewLoader.vue b/client/src/components/Summoner/Overview/OverviewLoader.vue
index 8f2afc2..652d176 100644
--- a/client/src/components/Summoner/Overview/OverviewLoader.vue
+++ b/client/src/components/Summoner/Overview/OverviewLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mt-3 text-center">
+  <div class="mt-3 flex text-center">
     <div class="w-3/12">
       <div class="rounded-lg bg-blue-850" style="width: 300px; height: 339px">
         <content-loader
diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue
index 8e852dd..e8d9bae 100644
--- a/client/src/components/Summoner/Overview/SummonerChampions.vue
+++ b/client/src/components/Summoner/Overview/SummonerChampions.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="bg-blue-800 rounded-lg">
-    <div class="relative flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
-      <svg class="w-5 h-5" style="transform: rotate(-5deg)">
+  <div class="rounded-lg bg-blue-800">
+    <div class="heading relative flex items-center justify-center rounded-t-lg py-4 text-blue-200">
+      <svg class="h-5 w-5" style="transform: rotate(-5deg)">
         <use xlink:href="#layers" />
       </svg>
       <span class="mx-4 text-lg font-semibold uppercase">CHAMPIONS</span>
-      <svg class="w-5 h-5" style="transform: rotate(5deg)">
+      <svg class="h-5 w-5" style="transform: rotate(5deg)">
         <use xlink:href="#layers" />
       </svg>
-      <div class="absolute top-0 right-0 mt-3 mr-2">
+      <div class="absolute right-0 top-0 mr-2 mt-3">
         <Tooltip>
           <template #trigger>
-            <svg class="w-4 h-4 cursor-pointer">
+            <svg class="h-4 w-4 cursor-pointer">
               <use xlink:href="#info" />
             </svg>
           </template>
           <template #default>
-            <div class="px-2 text-sm text-center text-white select-none">
+            <div class="select-none px-2 text-center text-sm text-white">
               <div>Stats based on</div>
               <div>
                 <span class="font-bold text-teal-400">{{
@@ -24,7 +24,7 @@
                 }}</span>
                 matches
               </div>
-              <div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
+              <div class="mt-2 text-xs font-normal italic leading-tight text-blue-100">
                 Load more matches
                 <br />to have better results.
               </div>
@@ -35,14 +35,14 @@
     </div>
     <div v-if="stats.champion.length">
       <div
-        class="flex items-baseline px-4 mt-3 text-xs font-semibold text-left text-blue-300 uppercase"
+        class="mt-3 flex items-baseline px-4 text-left text-xs font-semibold uppercase text-blue-300"
       >
-        <div class="ml-2 text-base text-blue-400 w-champion">Champion</div>
+        <div class="w-champion ml-2 text-base text-blue-400">Champion</div>
         <div class="w-plays">Plays</div>
         <div class="w-winrate">Winrate</div>
         <div class="w-kda">KDA</div>
       </div>
-      <ul class="mt-1 text-sm text-left text-gray-100">
+      <ul class="mt-1 text-left text-sm text-gray-100">
         <li
           v-for="(champion, index) in stats.champion"
           :key="index"
@@ -53,10 +53,10 @@
           class="relative flex items-center px-4 py-2 leading-tight"
         >
           <div class="absolute text-xs" style="left: 6px">{{ index + 1 }}.</div>
-          <div class="flex items-center ml-2 w-champion">
+          <div class="w-champion ml-2 flex items-center">
             <div
               :style="{ backgroundImage: `url('${champion.champion.icon}')` }"
-              class="flex-shrink-0 w-8 h-8 bg-center bg-cover rounded-full bg-blue-1000"
+              class="h-8 w-8 flex-shrink-0 rounded-full bg-blue-1000 bg-cover bg-center"
             ></div>
             <div class="mx-1 truncate">{{ champion.champion.name }}</div>
           </div>
@@ -64,7 +64,7 @@
             <div class="text-xs text-purple-400">{{ champion.count }}</div>
             <div
               :style="{ width: widthBar(champion.count, mostPlayed) }"
-              class="h-1 bg-purple-400 rounded-full mt-0.5"
+              class="mt-0.5 h-1 rounded-full bg-purple-400"
             ></div>
           </div>
           <div class="w-winrate">
@@ -73,7 +73,7 @@
             </div>
             <div
               :style="{ width: widthBar(champion.wins, champion.count) }"
-              class="h-1 bg-green-400 rounded-full mt-0.5"
+              class="mt-0.5 h-1 rounded-full bg-green-400"
             ></div>
           </div>
           <div class="w-kda">
@@ -84,7 +84,7 @@
               :style="{
                 width: widthBar(kda(champion.kills, champion.deaths, champion.assists), bestKda),
               }"
-              class="h-1 bg-blue-400 rounded-full mt-0.5"
+              class="mt-0.5 h-1 rounded-full bg-blue-400"
             ></div>
           </div>
         </li>
diff --git a/client/src/components/Summoner/Overview/SummonerMates.vue b/client/src/components/Summoner/Overview/SummonerMates.vue
index f1169cb..30be4bc 100644
--- a/client/src/components/Summoner/Overview/SummonerMates.vue
+++ b/client/src/components/Summoner/Overview/SummonerMates.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="mt-4 bg-blue-800 rounded-lg">
+  <div class="mt-4 rounded-lg bg-blue-800">
     <div class="pb-2">
-      <div class="flex items-center justify-center py-4 text-blue-200 rounded-t-lg heading">
-        <svg class="w-5 h-5" style="transform: rotate(-5deg)">
+      <div class="heading flex items-center justify-center rounded-t-lg py-4 text-blue-200">
+        <svg class="h-5 w-5" style="transform: rotate(-5deg)">
           <use xlink:href="#people" />
         </svg>
         <span class="mx-4 text-lg font-semibold uppercase">FRIENDS</span>
-        <svg class="w-5 h-5" style="transform: rotate(5deg)">
+        <svg class="h-5 w-5" style="transform: rotate(5deg)">
           <use xlink:href="#people" />
         </svg>
       </div>
-      <div v-if="hasMates" class="px-4 py-2 text-sm text-left">
-        <div class="flex items-baseline text-xs font-semibold text-blue-300 uppercase">
+      <div v-if="hasMates" class="px-4 py-2 text-left text-sm">
+        <div class="flex items-baseline text-xs font-semibold uppercase text-blue-300">
           <div class="w-2/4 text-base text-blue-400">Summoner</div>
           <div class="w-1/4">Record</div>
           <div class="w-1/4">Winrate</div>
@@ -31,7 +31,7 @@
             <div class="w-1/4">
               <Tooltip>
                 <template #trigger>
-                  <div class="h-2 bg-blue-900 rounded-full cursor-pointer">
+                  <div class="h-2 cursor-pointer rounded-full bg-blue-900">
                     <div
                       :class="getWinrateColor(mate.wins, mate.count)"
                       :style="{ width: `${winrate(mate.wins, mate.count)}%` }"
@@ -40,7 +40,7 @@
                   </div>
                 </template>
                 <template #default>
-                  <div class="px-2 text-xs text-center text-white">
+                  <div class="px-2 text-center text-xs text-white">
                     <div>Winrate</div>
                     <div>
                       <span
diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue
index 9383381..e459607 100644
--- a/client/src/components/Summoner/Overview/SummonerStats.vue
+++ b/client/src/components/Summoner/Overview/SummonerStats.vue
@@ -1,27 +1,27 @@
 <template>
-  <div v-if="stats.global" class="mt-4 bg-blue-800 rounded-lg">
-    <div class="relative flex justify-center py-4 text-blue-200 rounded-t-lg heading">
-      <svg class="w-6 h-6">
+  <div v-if="stats.global" class="mt-4 rounded-lg bg-blue-800">
+    <div class="heading relative flex justify-center rounded-t-lg py-4 text-blue-200">
+      <svg class="h-6 w-6">
         <use xlink:href="#graph" />
       </svg>
       <span class="mx-4 text-lg font-semibold uppercase">STATS</span>
-      <svg class="w-6 h-6" style="transform: scaleX(-1)">
+      <svg class="h-6 w-6" style="transform: scaleX(-1)">
         <use xlink:href="#graph" />
       </svg>
-      <div class="absolute top-0 right-0 mt-3 mr-2">
+      <div class="absolute right-0 top-0 mr-2 mt-3">
         <Tooltip>
           <template #trigger>
-            <svg class="w-4 h-4 cursor-pointer">
+            <svg class="h-4 w-4 cursor-pointer">
               <use xlink:href="#info" />
             </svg>
           </template>
           <template #default>
-            <div class="px-2 text-sm text-center text-white select-none">
+            <div class="select-none px-2 text-center text-sm text-white">
               <div>Stats based on</div>
               <div>
                 <span class="font-bold text-teal-400">{{ stats.global.count }}</span> matches
               </div>
-              <div class="mt-2 text-xs italic font-normal leading-tight text-blue-100">
+              <div class="mt-2 text-xs font-normal italic leading-tight text-blue-100">
                 Load more matches
                 <br />to have better results.
               </div>
@@ -30,15 +30,15 @@
         </Tooltip>
       </div>
     </div>
-    <div class="flex items-center py-2 mt-2">
+    <div class="mt-2 flex items-center py-2">
       <div
         v-for="(role, index) in stats.role"
         :key="index"
-        class="flex flex-col items-center w-1/5"
+        class="flex w-1/5 flex-col items-center"
       >
         <Tooltip>
           <template #trigger>
-            <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
+            <div class="flex h-12 w-2 cursor-pointer flex-col justify-end rounded-full bg-blue-900">
               <div
                 :style="{
                   height: (((role.count * 3) / mostPlayedRole) * role.wins) / role.count + 'rem',
@@ -56,7 +56,7 @@
             </div>
           </template>
           <template #default>
-            <div class="px-2 text-sm text-center text-white select-none">
+            <div class="select-none px-2 text-center text-sm text-white">
               <div>{{ role.role | capitalize }}</div>
               <span :class="winLossColor(role.wins, role.losses).win" class="font-bold">{{
                 role.wins
@@ -73,14 +73,14 @@
         </Tooltip>
         <div
           :style="{ backgroundImage: `url(${'/img/roles/' + role.role + '.png'})` }"
-          class="w-4 h-4 mt-1 bg-center bg-cover"
+          class="mt-1 h-4 w-4 bg-cover bg-center"
         ></div>
         <div class="text-xs text-blue-200">{{ role.count }}</div>
       </div>
     </div>
-    <div class="py-2 text-sm text-center">
-      <div class="flex items-baseline px-4 text-xs font-semibold text-blue-300 uppercase">
-        <div class="w-1/4 text-base text-left text-blue-400">Stat</div>
+    <div class="py-2 text-center text-sm">
+      <div class="flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
+        <div class="w-1/4 text-left text-base text-blue-400">Stat</div>
         <div class="w-1/4">Total</div>
         <div class="w-1/4">Per min</div>
         <div class="w-1/4">Avg</div>
@@ -97,26 +97,26 @@
           <div class="w-1/4">{{ (stat / (stats.global.time / 60)) | round }}</div>
           <div class="w-1/4">{{ (stat / stats.global.count) | round }}</div>
         </li>
-        <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
-          <div class="w-1/4 text-left whitespace-nowrap">Time</div>
+        <li class="flex items-center justify-between bg-blue-760 px-4 py-1 leading-tight">
+          <div class="w-1/4 whitespace-nowrap text-left">Time</div>
           <div class="w-1/4">{{ stats.global.time | secToHours }}</div>
           <div class="w-1/4"></div>
           <div class="w-1/4">{{ (stats.global.time / stats.global.count) | secToTime(true) }}</div>
         </li>
         <li class="flex items-center justify-between px-4 py-1 leading-tight">
-          <div class="w-1/4 text-left whitespace-nowrap">KDA</div>
+          <div class="w-1/4 whitespace-nowrap text-left">KDA</div>
           <div class="w-1/4">
             {{ ((stats.global.kills + stats.global.assists) / stats.global.deaths) | round }}
           </div>
         </li>
-        <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
-          <div class="w-1/4 text-left whitespace-nowrap">Kill participation</div>
+        <li class="flex items-center justify-between bg-blue-760 px-4 py-1 leading-tight">
+          <div class="w-1/4 whitespace-nowrap text-left">Kill participation</div>
           <div class="w-1/4">{{ stats.global.kp | percent }}</div>
         </li>
       </ul>
       <template v-if="leagueStatsByType('Ranked').length">
-        <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-          <div class="w-5/12 text-base text-left text-blue-400">Ranked</div>
+        <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
+          <div class="w-5/12 text-left text-base text-blue-400">Ranked</div>
           <div class="w-3/12">Winrate</div>
           <div class="w-4/12">Record</div>
         </div>
@@ -144,8 +144,8 @@
         </ul>
       </template>
       <template v-if="leagueStatsByType('Normal').length">
-        <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-          <div class="w-5/12 text-base text-left text-blue-400">Normal</div>
+        <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
+          <div class="w-5/12 text-left text-base text-blue-400">Normal</div>
           <div class="w-3/12">Winrate</div>
           <div class="w-4/12">Record</div>
         </div>
@@ -173,8 +173,8 @@
         </ul>
       </template>
 
-      <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-        <div class="w-5/12 text-base text-left text-blue-400">Class</div>
+      <div class="mt-3 flex items-baseline px-4 text-xs font-semibold uppercase text-blue-300">
+        <div class="w-5/12 text-left text-base text-blue-400">Class</div>
         <div class="w-3/12">Winrate</div>
         <div class="w-4/12">Record</div>
       </div>
diff --git a/client/src/components/Summoner/RecentActivity.vue b/client/src/components/Summoner/RecentActivity.vue
index 5b98d3c..afbd208 100644
--- a/client/src/components/Summoner/RecentActivity.vue
+++ b/client/src/components/Summoner/RecentActivity.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div class="inline-block bg-blue-800 rounded-lg">
+    <div class="inline-block rounded-lg bg-blue-800">
       <div
-        class="relative flex items-center justify-center py-2 text-blue-200 rounded-t-lg heading"
+        class="heading relative flex items-center justify-center rounded-t-lg py-2 text-blue-200"
       >
-        <svg class="w-4 h-4">
+        <svg class="h-4 w-4">
           <use xlink:href="#time" />
         </svg>
         <span class="mx-3 text-sm font-bold uppercase">Recent Activity</span>
-        <svg class="w-4 h-4">
+        <svg class="h-4 w-4">
           <use xlink:href="#time" />
         </svg>
       </div>
@@ -19,7 +19,7 @@
           <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[73].month }}</span>
           <span class="ml-16 text-xs font-semibold text-blue-200">{{ gridDays[104].month }}</span>
         </div>
-        <div class="flex mt-1">
+        <div class="mt-1 flex">
           <div class="flex flex-col">
             <span class="text-xs font-semibold leading-snug text-blue-200">Mo</span>
             <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Tu</span>
@@ -30,20 +30,20 @@
             <span class="mt-1 text-xs font-semibold leading-snug text-blue-200">Su</span>
           </div>
           <div
-            class="flex flex-col flex-wrap ml-1"
+            class="ml-1 flex flex-col flex-wrap"
             style="width: calc(20px * 15); height: calc(20px * 7)"
           >
             <Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
               <template #trigger>
                 <div
                   :class="[getCaseMargin(index), getCaseColor(day.matches)]"
-                  class="w-4 h-4 ml-1 cursor-pointer"
+                  class="ml-1 h-4 w-4 cursor-pointer"
                 />
               </template>
               <template #default>
-                <div class="px-2 text-xs text-center text-blue-200 leading-5">
+                <div class="px-2 text-center text-xs leading-5 text-blue-200">
                   <div>
-                    <span class="text-white font-semibold">{{ day.date }}</span>
+                    <span class="font-semibold text-white">{{ day.date }}</span>
                     <span>: </span>
                     <span class="font-bold text-teal-400">{{ day.matches }}</span>
                     <span> {{ day.matches > 1 ? 'games' : 'game' }}</span>
diff --git a/client/src/components/Summoner/Records/RecordCard.vue b/client/src/components/Summoner/Records/RecordCard.vue
index 011c08b..5d5a680 100644
--- a/client/src/components/Summoner/Records/RecordCard.vue
+++ b/client/src/components/Summoner/Records/RecordCard.vue
@@ -9,7 +9,7 @@
          }/${record.champion_id}000.jpg')`,
     }"
     :class="borderColor"
-    class="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card"
+    class="record-card relative mx-2 mt-6 w-full rounded-lg border bg-cover bg-center p-4 leading-none"
   >
     <div
       :class="[
@@ -17,14 +17,14 @@
         title.length > 15 ? 'text-sm' : 'text-base',
       ]"
       :style="{ borderColor: hover ? color : 'transparent' }"
-      class="absolute top-0 left-0 px-3 py-2 mt-2 ml-2 font-medium leading-4 transition-colors duration-500 ease-in-out border border-transparent rounded-md"
+      class="absolute left-0 top-0 ml-2 mt-2 rounded-md border border-transparent px-3 py-2 font-medium leading-4 transition-colors duration-500 ease-in-out"
     >
       <span :class="textColor" class="ml-0">{{ title }}</span>
     </div>
     <img
       :src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion_id}.png`"
-      :class="[{ 'opacity-0 scale-125': hover }, borderColor]"
-      class="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
+      :class="[{ 'scale-125 opacity-0': hover }, borderColor]"
+      class="mx-auto mt-10 block h-16 w-16 transform rounded-full border-2 transition duration-500 ease-in"
       alt="Champion Played"
     />
     <div :style="{ textShadow: `-2px 1px 6px ${color}` }" class="mt-6 text-4xl">
@@ -43,7 +43,7 @@
         <span class="font-semibold text-white">{{ record.champion.name }}</span>
       </div>
     </div>
-    <div class="mt-6 text-xs font-light text-right text-gray-200 opacity-25">
+    <div class="mt-6 text-right text-xs font-light text-gray-200 opacity-25">
       <span v-if="hover">{{ record.id }}</span>
       <span v-else>{{ gameModes[record.gamemode].name }}</span>
     </div>
diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index 6d32b19..7b1a582 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -1,54 +1,54 @@
 <template>
-  <div class="flex items-center ml-2 leading-none">
-    <div class="flex flex-col justify-center ml-1">
+  <div class="ml-2 flex items-center leading-none">
+    <div class="ml-1 flex flex-col justify-center">
       <div class="flex items-center">
         <div
           ref="leagueBorder"
           :style="{ backgroundColor: colorBorder }"
-          class="relative flex items-center justify-center w-12 h-12 rounded-full percentage-circle"
+          class="percentage-circle relative flex h-12 w-12 items-center justify-center rounded-full"
         >
-          <div class="relative p-1 bg-blue-900 rounded-full w-11 h-11">
+          <div class="relative h-11 w-11 rounded-full bg-blue-900 p-1">
             <div
-              class="h-full bg-center bg-cover mt-0.5"
+              class="mt-0.5 h-full bg-cover bg-center"
               :style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
             ></div>
           </div>
         </div>
-        <div class="ml-2 text-3xl font-bold text-teal-500 uppercase">
+        <div class="ml-2 text-3xl font-bold uppercase text-teal-500">
           {{ selectedLeague.fullRank }}
         </div>
         <div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
         <div
           v-if="selectedLeague.miniSeries"
-          class="flex items-center p-2 ml-2 bg-blue-800 rounded"
+          class="ml-2 flex items-center rounded bg-blue-800 p-2"
         >
           <div
             v-for="(result, index) in bo"
             :key="index + result"
             :class="[{ 'ml-1': index !== 0 }, boGame(result)]"
-            class="w-3 h-3 rounded-full"
+            class="h-3 w-3 rounded-full"
           ></div>
         </div>
       </div>
-      <div class="flex items-center mt-2">
+      <div class="mt-2 flex items-center">
         <div class="relative inline-block text-white">
           <select
             v-model="selectedKey"
-            class="block w-full px-4 py-2 pr-8 text-lg font-bold leading-tight bg-blue-800 rounded-md appearance-none cursor-pointer hover:bg-blue-700 focus:outline-none"
+            class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 px-4 py-2 pr-8 text-lg font-bold leading-tight hover:bg-blue-700 focus:outline-none"
           >
             <option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
               {{ data.name }}
             </option>
           </select>
           <div
-            class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
           >
-            <svg class="w-5 h-5 text-white">
+            <svg class="h-5 w-5 text-white">
               <use xlink:href="#chevron-down" />
             </svg>
           </div>
         </div>
-        <div class="flex items-center p-2 ml-2 bg-blue-800 rounded">
+        <div class="ml-2 flex items-center rounded bg-blue-800 p-2">
           <div class="text-base font-semibold uppercase">Record</div>
           <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
           <span class="mx-1">-</span>
@@ -56,7 +56,7 @@
           <div class="ml-3 text-base font-semibold uppercase">Winrate</div>
           <div
             :class="[
-              'ml-2 text-base leading-tight font-semibold',
+              'ml-2 text-base font-semibold leading-tight',
               parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400',
             ]"
           >
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index 15496a6..24b19ce 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col min-h-screen overflow-hidden bg-blue-900">
+  <div class="flex min-h-screen flex-col overflow-hidden bg-blue-900">
     <LazyBackground
       image-source="/img/bg-homepage-1.jpg"
       image-class="absolute z-0 w-full h-[50rem]"
@@ -9,10 +9,10 @@
 
     <header
       :class="bgHeader ? 'header-scrolled' : 'bg-transparent'"
-      class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header"
+      class="header fixed left-0 right-0 z-20 border-b-2 px-4 text-teal-100 transition-colors duration-100 ease-in-out"
       style="border-color: rgba(144, 205, 244, 0.4)"
     >
-      <div class="flex items-center justify-between py-2 -mb-0.5">
+      <div class="-mb-0.5 flex items-center justify-between py-2">
         <div class="flex flex-1">
           <router-link to="/">
             <img class="block h-10" src="/img/Logo.svg" alt="LeagueStats logo" />
@@ -23,7 +23,7 @@
 
         <div class="flex-1">
           <div class="flex items-center justify-end">
-            <a class="relative text-sm discord" href="https://discord.gg/RjBzjfk" target="_blank">
+            <a class="discord relative text-sm" href="https://discord.gg/RjBzjfk" target="_blank">
               <svg
                 class="absolute fill-current"
                 xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@
       </div>
     </header>
 
-    <div class="relative z-10 flex-grow mx-auto mt-20 text-white page-wrapper">
+    <div class="page-wrapper relative z-10 mx-auto mt-20 flex-grow text-white">
       <template v-if="summonerLoading || summonerFound">
         <template v-if="summonerLoading">
           <HeaderLoader />
@@ -52,7 +52,7 @@
         <template v-else-if="summonerFound">
           <div class="flex items-center justify-between">
             <div>
-              <div class="flex items-center mt-2">
+              <div class="mt-2 flex items-center">
                 <Tooltip>
                   <template #trigger>
                     <h1 class="text-4xl font-extrabold">
@@ -62,10 +62,10 @@
                   <template #default>
                     <div
                       v-if="basic.account.names.length > 1"
-                      class="px-2 text-sm text-center text-white select-none"
+                      class="select-none px-2 text-center text-sm text-white"
                     >
                       <div>Old summoner names</div>
-                      <ul class="pl-2 text-left list-disc list-inside">
+                      <ul class="list-inside list-disc pl-2 text-left">
                         <li
                           v-for="name in basic.account.names.slice(0, -1)"
                           :key="name.date"
@@ -79,33 +79,33 @@
                 </Tooltip>
                 <div
                   v-if="playing"
-                  class="flex items-center px-3 py-1 mt-2 ml-4 bg-teal-800 border border-teal-400 rounded-full"
+                  class="ml-4 mt-2 flex items-center rounded-full border border-teal-400 bg-teal-800 px-3 py-1"
                 >
-                  <div class="w-2 h-2 rounded-full playing-dot bg-teal-flashy"></div>
+                  <div class="playing-dot h-2 w-2 rounded-full bg-teal-flashy"></div>
                   <span class="ml-2 text-sm font-semibold text-teal-flashy">In Game</span>
                 </div>
                 <div
                   v-if="false"
-                  class="inline-flex items-center px-2 py-1 mt-2 ml-4 leading-tight border border-teal-500 rounded"
+                  class="ml-4 mt-2 inline-flex items-center rounded border border-teal-500 px-2 py-1 leading-tight"
                   style="background: rgba(40, 94, 97, 0.35)"
                 >
-                  <svg class="w-4 h-4 text-teal-600">
+                  <svg class="h-4 w-4 text-teal-600">
                     <use xlink:href="#star" />
                   </svg>
                   <div class="ml-1 text-xs font-bold text-teal-200">Favorite</div>
                 </div>
               </div>
-              <div class="flex mt-2">
-                <div :class="{ playing: playing }" class="relative w-24 h-24">
+              <div class="mt-2 flex">
+                <div :class="{ playing: playing }" class="relative h-24 w-24">
                   <div
                     :class="{ 'border-2': !playing }"
-                    class="relative z-10 w-24 h-24 bg-center bg-cover border-teal-400 rounded-full bg-blue-1000"
+                    class="relative z-10 h-24 w-24 rounded-full border-teal-400 bg-blue-1000 bg-cover bg-center"
                     :style="{
                       backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${basic.account.profileIconId}.jpg')`,
                     }"
                   >
                     <div
-                      class="absolute bottom-0 left-0 flex items-center justify-center w-8 h-8 text-xs font-extrabold text-teal-500 bg-blue-900 border-2 border-teal-400 rounded-full"
+                      class="absolute bottom-0 left-0 flex h-8 w-8 items-center justify-center rounded-full border-2 border-teal-400 bg-blue-900 text-xs font-extrabold text-teal-500"
                     >
                       {{ basic.account.summonerLevel }}
                     </div>
@@ -132,7 +132,7 @@
                   params: { region: $route.params.region, name: $route.params.name },
                 }"
                 :class="isRouteActive('summoner')"
-                class="pb-2 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
+                class="cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
                 exact
                 >Overview</router-link
               >
@@ -142,7 +142,7 @@
                   params: { region: $route.params.region, name: $route.params.name },
                 }"
                 :class="isRouteActive('summonerChampions')"
-                class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
+                class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
                 exact
                 >Champions</router-link
               >
@@ -152,7 +152,7 @@
                   params: { region: $route.params.region, name: $route.params.name },
                 }"
                 :class="isRouteActive('summonerRecords')"
-                class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
+                class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
                 exact
                 >Records</router-link
               >
@@ -162,7 +162,7 @@
                   params: { region: $route.params.region, name: $route.params.name },
                 }"
                 :class="isRouteActive('summonerLive')"
-                class="pb-2 ml-4 text-blue-300 border-b-2 border-transparent cursor-pointer hover:text-blue-100"
+                class="ml-4 cursor-pointer border-b-2 border-transparent pb-2 text-blue-300 hover:text-blue-100"
                 exact
                 >Live game</router-link
               >
@@ -182,8 +182,8 @@
       </template>
 
       <template v-else-if="summonerNotFound">
-        <div class="flex justify-center mt-16">
-          <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
+        <div class="mt-16 flex justify-center">
+          <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
             <div>Player can't be found.</div>
             <div>😕</div>
           </div>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 0bd84d9..2f08800 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -6,22 +6,22 @@
       transition-name="fade"
     ></LazyBackground>
 
-    <div class="flex flex-col items-center justify-center h-screen">
-      <div class="absolute top-0 right-0">
-        <div class="relative w-20 h-2 mt-4 mr-4 line line-top"></div>
+    <div class="flex h-screen flex-col items-center justify-center">
+      <div class="absolute right-0 top-0">
+        <div class="line line-top relative mr-4 mt-4 h-2 w-20"></div>
       </div>
 
       <div class="absolute bottom-0 left-0">
-        <div class="relative w-20 h-2 mb-4 ml-4 line line-bottom"></div>
+        <div class="line line-bottom relative mb-4 ml-4 h-2 w-20"></div>
       </div>
 
-      <div class="relative flex flex-col items-center w-full max-w-lg">
-        <img class="absolute logo" src="/img/Logo.svg" alt="logo" />
+      <div class="relative flex w-full max-w-lg flex-col items-center">
+        <img class="logo absolute" src="/img/Logo.svg" alt="logo" />
         <SearchForm @formSubmit="redirect" :homepage="true" />
       </div>
 
       <p
-        class="absolute bottom-0 pb-4 leading-tight text-center text-blue-300 horizontal-center text-xxs"
+        class="horizontal-center absolute bottom-0 pb-4 text-center text-xxs leading-tight text-blue-300"
       >
         LeagueStats.gg isn't endorsed by Riot Games and doesn't reflect the views or opinions of
         Riot Games or anyone officially involved in producing or managing Riot Games properties.
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 3d45b2a..7793ca5 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -2,12 +2,12 @@
   <div
     v-if="overviewLoaded"
     key="overview"
-    class="relative flex items-start justify-between mt-3 text-center vue-sticky-container"
+    class="vue-sticky-container relative mt-3 flex items-start justify-between text-center"
   >
     <VueStickySidebar
       :top-spacing="48"
       :bottom-spacing="123"
-      class="z-40 sidebar"
+      class="sidebar z-40"
       container-selector=".vue-sticky-container"
     >
       <SummonerChampions />
@@ -37,7 +37,7 @@
       </div>
       <div v-else>
         <div class="flex justify-center">
-          <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
+          <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
             <div>No matches found.</div>
             <div>😕</div>
           </div>
diff --git a/client/src/views/SummonerLive.vue b/client/src/views/SummonerLive.vue
index 4f86bcc..662b4f2 100644
--- a/client/src/views/SummonerLive.vue
+++ b/client/src/views/SummonerLive.vue
@@ -1,7 +1,7 @@
 <template>
   <div key="live-game">
     <div v-if="playing || summonerLoading">
-      <div v-if="liveLoaded" class="flex items-center justify-end -mt-4 text-base text-blue-200">
+      <div v-if="liveLoaded" class="-mt-4 flex items-center justify-end text-base text-blue-200">
         <div>{{ gamemode.type }} {{ gamemode.name }}</div>
         <div class="mx-2">-</div>
         <div :class="{ 'w-12': displayStartTime !== 'Not started yet' }">
@@ -9,7 +9,7 @@
         </div>
         <button
           @click="liveMatchRequest"
-          class="px-3 py-1 ml-4 text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
+          class="ml-4 rounded-md bg-blue-800 px-3 py-1 text-blue-100 shadow-md hover:bg-blue-760"
         >
           Reload
         </button>
@@ -20,13 +20,13 @@
       <LiveTeam :team="enemyTeam" :ally="false" :gamemode="gamemode.name" class="mt-4" />
     </div>
     <div v-else>
-      <div class="flex justify-center mt-16">
-        <div class="px-4 py-3 text-lg font-bold text-center text-blue-100 rounded-lg bg-gradient">
+      <div class="mt-16 flex justify-center">
+        <div class="bg-gradient rounded-lg px-4 py-3 text-center text-lg font-bold text-blue-100">
           <div>This summoner is not in game.</div>
           <div class="mt-2">🕊</div>
           <button
             @click="liveMatchRequest"
-            class="px-3 py-1 my-4 text-sm text-blue-100 bg-blue-800 rounded-md shadow-md hover:bg-blue-760"
+            class="my-4 rounded-md bg-blue-800 px-3 py-1 text-sm text-blue-100 shadow-md hover:bg-blue-760"
           >
             Reload
           </button>
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index 5a52230..0fff38b 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -2,11 +2,11 @@
   <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.assists)">
       <div
-        class="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900"
+        class="category blue-900 relative border-b-2 border-blue-800 pl-6 text-2xl text-blue-200"
       >
         Basics
       </div>
-      <div class="flex flex-wrap -mx-2">
+      <div class="-mx-2 flex flex-wrap">
         <template v-if="recordsLoaded">
           <RecordCard
             color="#63b3ed"
@@ -71,11 +71,11 @@
         </template>
       </div>
       <div
-        class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category"
+        class="blue-900 category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200"
       >
         Game impact
       </div>
-      <div class="flex flex-wrap -mx-2">
+      <div class="-mx-2 flex flex-wrap">
         <template v-if="recordsLoaded">
           <RecordCard
             color="#FC8181"
@@ -140,10 +140,10 @@
           </div>
         </template>
       </div>
-      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">
+      <div class="category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200">
         Miscellaneous
       </div>
-      <div class="flex flex-wrap -mx-2">
+      <div class="-mx-2 flex flex-wrap">
         <template v-if="recordsLoaded">
           <RecordCard
             color="#4299E1"
@@ -193,10 +193,10 @@
           </div>
         </template>
       </div>
-      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">
+      <div class="category relative mt-3 border-b-2 border-blue-800 pl-6 text-2xl text-blue-200">
         Multi kills
       </div>
-      <div class="flex flex-wrap -mx-2">
+      <div class="-mx-2 flex flex-wrap">
         <template v-if="recordsLoaded">
           <RecordCard
             color="#FEFCBF"
@@ -255,7 +255,7 @@
       </div>
     </template>
     <template v-if="recordsLoaded && !records.assists">
-      <div class="flex flex-col items-center mt-4">
+      <div class="mt-4 flex flex-col items-center">
         <div>No records have been found.</div>
         <div>😕</div>
       </div>
@@ -314,7 +314,7 @@ export default {
 
 <style scoped>
 .category:before {
-  @apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1;
+  @apply absolute left-0 ml-1 block h-2 w-2 bg-blue-200;
   content: '';
   top: 35%;
   transform: rotate(45deg);