diff --git a/.vscode/settings.json b/.vscode/settings.json
index b4519c4..3cc5a57 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,8 @@
     "files.eol": "\n",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
+    },
+    "[svelte]": {
+      "editor.defaultFormatter": "svelte.svelte-vscode"
     }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 082ab79..6e1d379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3603,6 +3603,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -5419,6 +5425,42 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -6170,6 +6212,12 @@
       "dev": true,
       "optional": true
     },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -7729,6 +7777,12 @@
       "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
       "dev": true
     },
+    "lodash.topath": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
+      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8352,9 +8406,9 @@
       "dev": true
     },
     "modern-normalize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
-      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
       "dev": true
     },
     "moment": {
@@ -8928,6 +8982,35 @@
         }
       }
     },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "requires": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -11883,6 +11966,12 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.2.tgz",
       "integrity": "sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg=="
     },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -13680,37 +13769,44 @@
       }
     },
     "tailwindcss": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.4.tgz",
-      "integrity": "sha512-WhgR0oiBxGOZ9jY0yVfaJCHnckR7U74Fs/BMsYxGdwGJQ5Hd/HlaKD26bEJFZOvYScJo0QcUj2ImldzedsG7Bw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.2.tgz",
+      "integrity": "sha512-T5t+wwd+/hsOyRw2HJuFuv0LTUm3MUdHm2DJ94GPVgzqwPPFa9XxX0KlwLWupUuiOUj6uiKURCzYPHFcuPch/w==",
       "dev": true,
       "requires": {
         "@fullhuman/postcss-purgecss": "^3.1.3",
         "bytes": "^3.0.0",
         "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
         "color": "^3.1.3",
         "detective": "^5.2.0",
         "didyoumean": "^1.2.1",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.5",
         "fs-extra": "^9.1.0",
         "html-tags": "^3.1.0",
         "lodash": "^4.17.21",
+        "lodash.topath": "^4.5.2",
         "modern-normalize": "^1.0.0",
         "node-emoji": "^1.8.1",
+        "normalize-path": "^3.0.0",
         "object-hash": "^2.1.1",
+        "parse-glob": "^3.0.4",
         "postcss-functions": "^3",
         "postcss-js": "^3.0.3",
-        "postcss-nested": "^5.0.5",
+        "postcss-nested": "5.0.5",
         "postcss-selector-parser": "^6.0.4",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
+        "quick-lru": "^5.1.1",
         "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0"
       },
       "dependencies": {
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
diff --git a/package.json b/package.json
index eb1e340..451ee76 100644
--- a/package.json
+++ b/package.json
@@ -220,7 +220,7 @@
     "svelte-jester": "1.3.0",
     "svelte-loader": "^3.0.0",
     "svelte-preprocess": "^4.6.9",
-    "tailwindcss": "^2.0.3",
+    "tailwindcss": "^2.1.2",
     "ts-jest": "^26.5.3",
     "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
diff --git a/src/webview-ui/App.svelte b/src/webview-ui/App.svelte
index 16b9a6e..96ab7dc 100644
--- a/src/webview-ui/App.svelte
+++ b/src/webview-ui/App.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  import DiffBadge from "./common/DiffBadge.svelte";
-  import SnapshotContainer from "./snapshot/SnapshotContainer.svelte";
-  import TailwindBase from './tailwind/Base.svelte';
-  import TailwindComponents from './tailwind/Components.svelte';
-  import TailwindUtilities from './tailwind/Utilities.svelte';
-  import { onMount, setContext } from "svelte";
-  import { getWebviewData, isCurrentThemeDark, createScrollSync } from "./webviewStateHelpers";
-  import { sendWebviewMessage } from "./vscodeWebviewApi";
+  import DiffBadge from './common/DiffBadge.svelte';
+  import SnapshotContainer from './snapshot/SnapshotContainer.svelte';
+  import { onMount, setContext } from 'svelte';
+  import { getWebviewData, isCurrentThemeDark, createScrollSync } from './webviewStateHelpers';
+  import { sendWebviewMessage } from './vscodeWebviewApi';
 
   const { snapshotData, extensionConfig } = getWebviewData();
   const darkMode = isCurrentThemeDark();
@@ -14,7 +11,7 @@
 
   onMount(() => {
     sendWebviewMessage({ intent: 'webviewReady', ready: true });
-  })
+  });
 
   $: {
     if ($darkMode) {
@@ -24,7 +21,7 @@
     }
   }
 
-  $: diffExists = !!$snapshotData?.resources.some(({diff}) => diff.exists);
+  $: diffExists = !!$snapshotData?.resources.some(({ diff }) => diff.exists);
 
   $: {
     if ($extensionConfig) {
@@ -33,9 +30,6 @@
   }
 </script>
 
-<TailwindBase />
-<TailwindComponents />
-<TailwindUtilities />
 <main class="w-full h-full flex flex-col">
   {#if $snapshotData}
     <div class="flex p-4 shadow space-x-3">
@@ -52,9 +46,14 @@
   {/if}
 </main>
 
-<style global>
-  html, body {
+<style global lang="postcss">
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  html,
+  body {
     height: 100%;
-    width: 100%
+    width: 100%;
   }
 </style>
diff --git a/src/webview-ui/common/DiffBadge.svelte b/src/webview-ui/common/DiffBadge.svelte
index a48192f..a7d72d4 100644
--- a/src/webview-ui/common/DiffBadge.svelte
+++ b/src/webview-ui/common/DiffBadge.svelte
@@ -1,6 +1,3 @@
-<span
-  data-testid="diff-badge"
-  class="text-xs text-white px-2 py-0.5 font-medium rounded-full self-center bg-red-600"
->
+<span data-testid="diff-badge" class="text-xs text-white px-2 py-0.5 font-medium rounded-full self-center bg-red-600">
   DIFF
 </span>
diff --git a/src/webview-ui/common/Image.svelte b/src/webview-ui/common/Image.svelte
index 290cd06..3835f80 100644
--- a/src/webview-ui/common/Image.svelte
+++ b/src/webview-ui/common/Image.svelte
@@ -3,6 +3,6 @@
   export let alt: string;
 </script>
 
-<div class="h-full w-full flex items-center justify-center"> 
+<div class="h-full w-full flex items-center justify-center">
   <img class="object-scale-down h-full" {src} {alt} />
 </div>
diff --git a/src/webview-ui/common/NoResource.svelte b/src/webview-ui/common/NoResource.svelte
index 507000b..4ca26b0 100644
--- a/src/webview-ui/common/NoResource.svelte
+++ b/src/webview-ui/common/NoResource.svelte
@@ -3,9 +3,7 @@
 </script>
 
 <div class="h-full w-full flex flex-col justify-center items-center">
-  <p class="snapshot-text text-4xl text-center font-semibold opacity-40 mb-6">
-    Resource Does Not Exist
-  </p>
+  <p class="snapshot-text text-4xl text-center font-semibold opacity-40 mb-6">Resource Does Not Exist</p>
   <div class="h-2/6 w-full opacity-40">
     <Tumbleweed />
   </div>
diff --git a/src/webview-ui/common/Tumbleweed.svelte b/src/webview-ui/common/Tumbleweed.svelte
index b191c05..3316c45 100644
--- a/src/webview-ui/common/Tumbleweed.svelte
+++ b/src/webview-ui/common/Tumbleweed.svelte
@@ -1,11 +1,20 @@
-<svg class="h-full w-full" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+<svg
+  class="h-full w-full"
+  version="1.0"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  preserveAspectRatio="xMidYMid meet"
+>
   <g class="fill-current" transform="translate(0, 512) scale(0.1, -0.1)" stroke="none">
-    <path d="M4722 4839 c-61 -24 -118 -74 -128 -113 -10 -42 18 -94 62 -112 40
+    <path
+      d="M4722 4839 c-61 -24 -118 -74 -128 -113 -10 -42 18 -94 62 -112 40
     -17 63 -12 114 22 47 33 85 31 121 -5 37 -37 38 -79 3 -120 l-26 -31 -349 0
     c-388 0 -404 -2 -434 -61 -14 -27 -15 -39 -6 -70 21 -71 11 -69 437 -69 l381
     0 61 31 c34 16 73 45 88 62 65 77 88 184 59 282 -23 80 -107 166 -185 189 -71
-    21 -133 19 -198 -5z"/>
-    <path d="M2294 4270 c-55 -22 -79 -97 -49 -150 8 -14 14 -28 15 -31 0 -3 -24
+    21 -133 19 -198 -5z"
+    />
+    <path
+      d="M2294 4270 c-55 -22 -79 -97 -49 -150 8 -14 14 -28 15 -31 0 -3 -24
     -11 -52 -18 -64 -16 -210 -75 -256 -103 -18 -11 -34 -19 -35 -17 -60 101 -118
     159 -160 159 -32 0 -76 -29 -93 -61 -19 -38 -12 -71 24 -118 15 -19 34 -48 43
     -65 l16 -30 -83 -79 c-90 -85 -171 -187 -224 -281 l-34 -59 -17 40 c-33 77
@@ -39,34 +48,50 @@
     90 -75 145 -47 29 15 51 53 51 87 0 67 -131 197 -247 245 l-36 15 6 97 c15
     240 101 459 251 643 53 64 70 64 41 -1 -35 -78 7 -150 87 -150 32 0 46 6 68
     30 44 47 62 111 67 242 l5 117 92 45 c95 47 228 90 331 106 79 12 305 4 375
-    -13z"/>
-    <path d="M2344 3581 c-31 -13 -64 -60 -64 -90 0 -39 33 -86 95 -133 l54 -43
+    -13z"
+    />
+    <path
+      d="M2344 3581 c-31 -13 -64 -60 -64 -90 0 -39 33 -86 95 -133 l54 -43
     -37 -22 c-20 -13 -42 -23 -49 -23 -19 0 -63 -60 -63 -86 0 -33 25 -81 49 -94
     57 -30 161 11 251 97 l55 54 65 -7 c74 -7 213 11 245 32 47 30 58 95 24 138
-    -33 42 -61 48 -150 35 -136 -21 -251 12 -351 100 -48 43 -89 57 -124 42z"/>
-    <path d="M2842 2995 c-48 -21 -65 -69 -65 -190 -1 -107 12 -179 48 -261 l23
+    -33 42 -61 48 -150 35 -136 -21 -251 12 -351 100 -48 43 -89 57 -124 42z"
+    />
+    <path
+      d="M2842 2995 c-48 -21 -65 -69 -65 -190 -1 -107 12 -179 48 -261 l23
     -52 -24 -40 c-41 -68 -76 -172 -69 -203 8 -36 59 -79 93 -79 43 0 88 34 102
     77 48 147 157 261 280 293 82 21 119 84 87 147 -35 67 -111 68 -240 5 l-79
-    -39 -8 23 c-15 39 -22 137 -12 184 4 25 5 59 0 77 -14 56 -79 83 -136 58z"/>
-    <path d="M1869 2911 c-45 -45 -40 -88 17 -165 89 -117 121 -222 101 -334 -18
+    -39 -8 23 c-15 39 -22 137 -12 184 4 25 5 59 0 77 -14 56 -79 83 -136 58z"
+    />
+    <path
+      d="M1869 2911 c-45 -45 -40 -88 17 -165 89 -117 121 -222 101 -334 -18
     -97 -14 -122 21 -154 36 -31 69 -35 110 -14 40 21 72 97 72 174 0 41 21 42 74
     2 54 -41 106 -41 147 -1 40 40 40 88 -1 134 -37 42 -131 93 -198 108 -50 10
-    -53 12 -82 72 -35 74 -111 176 -142 194 -41 22 -87 16 -119 -16z"/>
-    <path d="M773 4246 c-140 -46 -201 -143 -135 -217 39 -43 83 -43 148 0 42 28
+    -53 12 -82 72 -35 74 -111 176 -142 194 -41 22 -87 16 -119 -16z"
+    />
+    <path
+      d="M773 4246 c-140 -46 -201 -143 -135 -217 39 -43 83 -43 148 0 42 28
     55 32 94 28 64 -7 110 -58 110 -122 0 -38 -6 -52 -34 -83 l-34 -37 -329 -5
     c-180 -3 -336 -9 -346 -14 -21 -10 -47 -57 -47 -86 0 -35 27 -76 58 -89 21 -9
     119 -11 363 -9 l334 3 53 28 c67 35 122 90 153 153 20 41 24 64 24 139 0 105
-    -22 162 -88 228 -79 79 -223 116 -324 83z"/>
-    <path d="M3933 4065 c-40 -17 -69 -71 -59 -110 4 -15 18 -38 31 -51 l24 -24
-    251 0 c279 0 289 2 310 65 16 48 -8 101 -54 120 -50 21 -456 21 -503 0z"/>
-    <path d="M35 2277 c-17 -14 -28 -36 -32 -63 -5 -36 -1 -46 25 -75 l30 -34 235
+    -22 162 -88 228 -79 79 -223 116 -324 83z"
+    />
+    <path
+      d="M3933 4065 c-40 -17 -69 -71 -59 -110 4 -15 18 -38 31 -51 l24 -24
+    251 0 c279 0 289 2 310 65 16 48 -8 101 -54 120 -50 21 -456 21 -503 0z"
+    />
+    <path
+      d="M35 2277 c-17 -14 -28 -36 -32 -63 -5 -36 -1 -46 25 -75 l30 -34 235
     -3 c265 -3 293 2 322 59 14 27 15 39 6 70 -20 68 -25 69 -308 69 -247 0 -252
-    0 -278 -23z"/>
-    <path d="M35 1878 c-17 -15 -28 -37 -32 -64 -5 -36 -1 -46 25 -75 l30 -34 470
+    0 -278 -23z"
+    />
+    <path
+      d="M35 1878 c-17 -15 -28 -37 -32 -64 -5 -36 -1 -46 25 -75 l30 -34 470
     -5 c440 -5 471 -6 490 -24 29 -26 36 -68 18 -105 -29 -54 -92 -68 -140 -30
     -57 45 -123 40 -160 -12 -40 -58 -5 -128 88 -177 43 -22 64 -27 131 -27 67 0
-    88 5 131 27 211 111 210 407 -1 521 -39 22 -49 22 -532 25 l-491 3 -27 -23z"/>
-    <path d="M3420 1205 c-107 -18 -211 -49 -406 -120 -420 -153 -544 -175 -1032
+    88 5 131 27 211 111 210 407 -1 521 -39 22 -49 22 -532 25 l-491 3 -27 -23z"
+    />
+    <path
+      d="M3420 1205 c-107 -18 -211 -49 -406 -120 -420 -153 -544 -175 -1032
     -175 -329 0 -346 -3 -370 -55 -16 -34 -15 -60 3 -94 26 -52 42 -53 437 -49
     320 5 378 8 488 28 162 29 310 72 545 158 247 90 333 112 475 119 174 8 224
     -9 495 -167 200 -117 293 -140 570 -140 181 0 203 -2 232 -20 82 -50 82 -160
@@ -76,8 +101,9 @@
     -189 1 -262 29 -66 110 -143 176 -169 49 -19 103 -19 2355 -19 2252 0 2306 0
     2355 19 66 26 147 103 176 169 33 73 33 191 1 263 -29 64 -102 136 -167 166
     -46 21 -69 23 -295 29 -301 8 -302 8 -532 146 -212 127 -326 164 -497 162 -58
-    -1 -140 -7 -181 -14z"/>
+    -1 -140 -7 -181 -14z"
+    />
     <path d="M1201 896 c-87 -48 -50 -186 49 -186 51 0 100 49 100 99 0 75 -83
-    124 -149 87z"/>
+    124 -149 87z" />
   </g>
 </svg>
diff --git a/src/webview-ui/diff/Default.svelte b/src/webview-ui/diff/Default.svelte
index 13d68e4..6165e6c 100644
--- a/src/webview-ui/diff/Default.svelte
+++ b/src/webview-ui/diff/Default.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Image from "../common/Image.svelte";
+  import Image from '../common/Image.svelte';
 
   export let diff: string;
 </script>
diff --git a/src/webview-ui/diff/DiffContainer.svelte b/src/webview-ui/diff/DiffContainer.svelte
index e0b8408..d3a9adf 100644
--- a/src/webview-ui/diff/DiffContainer.svelte
+++ b/src/webview-ui/diff/DiffContainer.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Default from "./Default.svelte";
-  import TwoUp from "./TwoUp.svelte";
-  import Slide from "./Slide.svelte";
-  import Onion from "./Onion.svelte";
-  import { vsCodeWritable } from "../vscodeWebviewApi";
-  import { getContext } from "svelte";
-  import type { ExtensionConfiguration } from "../../types";
+  import Default from './Default.svelte';
+  import TwoUp from './TwoUp.svelte';
+  import Slide from './Slide.svelte';
+  import Onion from './Onion.svelte';
+  import { vsCodeWritable } from '../vscodeWebviewApi';
+  import { getContext } from 'svelte';
+  import type { ExtensionConfiguration } from '../../types';
 
   export let id: string;
   export let reference: string;
@@ -14,7 +14,7 @@
 
   type DiffType = 'default' | 'two-up' | 'slide' | 'onion';
   const { defaultDiffOption } = getContext<ExtensionConfiguration>('extension-config');
-  const activeDiff = vsCodeWritable<DiffType>(`${id}-active-diff`, defaultDiffOption)
+  const activeDiff = vsCodeWritable<DiffType>(`${id}-active-diff`, defaultDiffOption);
 
   const diffComponents = [
     ['default', Default, { diff }],
@@ -25,44 +25,34 @@
 
   const handleDiffOptionClick = (event: MouseEvent) => {
     $activeDiff = (event.currentTarget as HTMLButtonElement).dataset.diffOption as DiffType;
-  }
+  };
 </script>
 
 <div class="h-full w-full">
-  <div class="image-container">
+  <div class="h-[90%]">
     {#each diffComponents as [diffType, component, props]}
       <div class={`h-full w-full ${$activeDiff !== diffType ? 'hidden' : ''}`}>
         <svelte:component this={component} {...props} />
-      </div>  
+      </div>
     {/each}
   </div>
-  <div class="options-container flex justify-center items-center space-x-3">
+  <div class="h-[10%] flex justify-center items-center space-x-3">
     {#each diffComponents as [diffType]}
-      <button 
+      <button
         data-diff-option={diffType}
-        class={`btn w-20 shadow rounded-full capitalize font-medium text-sm text-black ${$activeDiff === diffType ? 'bg-lightBlue-400' : 'bg-gray-200'}`}
+        class={`btn focus:outline-none w-20 shadow rounded-full capitalize font-medium text-sm text-black ${
+          $activeDiff === diffType ? 'bg-lightBlue-400' : 'bg-gray-200'
+        }`}
         on:click={handleDiffOptionClick}
       >
-        <div class="py-1 px-3 rounded-full btn-content" tabindex={-1}>{diffType}</div>
+        <div class="py-1 px-3 rounded-full focus:outline-none btn-content" tabindex={-1}>{diffType}</div>
       </button>
     {/each}
   </div>
 </div>
 
 <style lang="postcss">
-  .image-container {
-    height: 90%;
-  }
-
-  .options-container {
-    height: 10%;
-  }
-
-  .btn:focus, .btn-content:focus {
-    outline: none;
-  }
-
   .btn:focus > .btn-content {
     @apply ring ring-lightBlue-200;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/webview-ui/diff/Onion.svelte b/src/webview-ui/diff/Onion.svelte
index 6cd9773..c931c20 100644
--- a/src/webview-ui/diff/Onion.svelte
+++ b/src/webview-ui/diff/Onion.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { vsCodeWritable } from "../vscodeWebviewApi";
+  import { vsCodeWritable } from '../vscodeWebviewApi';
 
   export let id: string;
   export let reference: string;
@@ -13,13 +13,13 @@
   }
 </script>
 
-<div data-testid="onion-diff" class="image-container relative">
+<div data-testid="onion-diff" class="h-[90%] relative">
   <img class="absolute h-full w-full object-scale-down" src={reference} alt="Reference snaphsot" />
   <img class="absolute h-full w-full object-scale-down" src={latest} alt="Latest snapshot" bind:this={latestImg} />
 </div>
-<div class="slider-container flex space-x-3 max-w-full mx-auto">
+<div class="h-[10%] w-[50rem] flex space-x-3 max-w-full mx-auto">
   <span class="w-24 text-base text-right flex justify-end items-center">Reference</span>
-  <input 
+  <input
     class="onion-slider appearance-none w-full h-1 rounded-full bg-gray-400 bg-opacity-40 focus:outline-none self-center"
     type="range"
     min={0}
@@ -29,28 +29,18 @@
   <span class="w-24 text-base flex items-center">Latest</span>
 </div>
 
-<style lang="postcss">
-  .image-container {
-    height: 90%;
+<style global lang="postcss">
+  .onion-slider::-webkit-slider-thumb {
+    appearance: none;
+    @apply h-4 w-4 bg-lightBlue-500 rounded-full cursor-pointer transition-all;
   }
 
-  .slider-container {
-    height: 10%;
-    width: 50rem;
+  .onion-slider:focus::-webkit-slider-thumb,
+  .onion-slider:hover::-webkit-slider-thumb {
+    @apply ring-4 ring-lightBlue-200 dark:ring-opacity-30 ring-opacity-70;
   }
 
-  :global {
-    .onion-slider::-webkit-slider-thumb {
-      appearance: none;
-      @apply h-4 w-4 bg-lightBlue-500 rounded-full cursor-pointer transition-all;
-    }
-
-    .onion-slider:focus::-webkit-slider-thumb, .onion-slider:hover::-webkit-slider-thumb {
-      @apply ring-4 ring-lightBlue-200 dark:ring-opacity-30 ring-opacity-70;
-    }
-    
-    .onion-slider:active::-webkit-slider-thumb {
-      @apply ring-8;
-    }
+  .onion-slider:active::-webkit-slider-thumb {
+    @apply ring-8;
   }
 </style>
diff --git a/src/webview-ui/diff/Slide.svelte b/src/webview-ui/diff/Slide.svelte
index c9a2afa..e39ef0b 100644
--- a/src/webview-ui/diff/Slide.svelte
+++ b/src/webview-ui/diff/Slide.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { vsCodeWritable } from "../vscodeWebviewApi";
+  import { vsCodeWritable } from '../vscodeWebviewApi';
 
   export let id: string;
   export let reference: string;
@@ -22,16 +22,18 @@
       resizeObserver?.disconnect();
       /**
        * No real value in unit testing resize logic with canned values.
-       * Testing consideration here would be to verify that the assumptions made about 
+       * Testing consideration here would be to verify that the assumptions made about
        * naturalHeight, naturalWidth, and contentRect are correct in a real browser environment.
        */
-      resizeObserver = new ResizeObserver(/* istanbul ignore next */([{ contentRect }]: ResizeObserverEntry[]) => {
-        if (latestImg && sliderBorder) {
-          const { naturalHeight, naturalWidth } = latestImg;
-          const imageHeight = (naturalHeight/naturalWidth) * contentRect.width;
-          sliderBorder.style.setProperty('--thumb-height', `${imageHeight}px`);
+      resizeObserver = new ResizeObserver(
+        /* istanbul ignore next */ ([{ contentRect }]: ResizeObserverEntry[]) => {
+          if (latestImg && sliderBorder) {
+            const { naturalHeight, naturalWidth } = latestImg;
+            const imageHeight = (naturalHeight / naturalWidth) * contentRect.width;
+            sliderBorder.style.setProperty('--thumb-height', `${imageHeight}px`);
+          }
         }
-      });
+      );
 
       resizeObserver.observe(latestImg);
     }
@@ -44,17 +46,17 @@
   </div>
   <div class="absolute h-full flex">
     <img class="object-contain max-h-full" src={latest} alt="Latest snapshot" bind:this={latestImg} />
-    <input 
-      class="slider-border absolute w-full h-0 top-1/2 appearance-none bg-transparent focus:outline-none" 
-      type="range" 
+    <input
+      class="slider-border absolute w-full h-0 top-1/2 appearance-none bg-transparent focus:outline-none"
+      type="range"
       min={0}
       max={100}
       value={$compareSliderValue}
       bind:this={sliderBorder}
       disabled
     />
-    <input 
-      class="compare-slider absolute w-full appearance-none focus:outline-none h-0"
+    <input
+      class="compare-slider top-[50%] absolute w-full appearance-none focus:outline-none h-0"
       type="range"
       aria-label="Snapshot comparison slider"
       min={0}
@@ -67,7 +69,6 @@
 <style lang="postcss">
   .compare-slider {
     width: calc(100% + 40px);
-    top: 50%;
     left: -20px;
     clip-path: inset(-20px 20px);
   }
diff --git a/src/webview-ui/snapshot/SnapshotContainer.svelte b/src/webview-ui/snapshot/SnapshotContainer.svelte
index 3845b4f..5ce0398 100644
--- a/src/webview-ui/snapshot/SnapshotContainer.svelte
+++ b/src/webview-ui/snapshot/SnapshotContainer.svelte
@@ -5,10 +5,10 @@
   import SnapshotTab from './SnapshotTab.svelte';
   import SnapshotTabBar from './SnapshotTabBar.svelte';
   import { getContext } from 'svelte';
-  import { sendWebviewMessage, vsCodeWritable } from "../vscodeWebviewApi";
+  import { sendWebviewMessage, vsCodeWritable } from '../vscodeWebviewApi';
   import type { WdioWebview } from '../../types';
   import type { TabType } from './SnapshotTabBar.svelte';
-  
+
   export let resource: WdioWebview.Resource;
 
   const { locale, formFactor } = resource;
@@ -16,35 +16,39 @@
   const initialTab = resource[defaultSnapshotTab].exists ? defaultSnapshotTab : fallbackSnapshotTab;
   const containerId = `${locale}-${formFactor}`;
   const activeTab = vsCodeWritable<TabType>(`${containerId}-active-tab`, initialTab);
-  const tabIds = { reference: `${containerId}-reference`, latest: `${containerId}-latest`, diff: `${containerId}-diff` };
+  const tabIds = {
+    reference: `${containerId}-reference`,
+    latest: `${containerId}-latest`,
+    diff: `${containerId}-diff`,
+  };
 
   const handleReplaceReferenceClick = () => {
     sendWebviewMessage({ intent: 'replaceReferenceWithLatest', locale, formFactor });
-  }
+  };
 </script>
 
 <div class=" mb-8 last:mb-0 border-b last:border-b-0" data-snapshot-container>
   <div class="flex mb-2.5 px-2">
     <h2 class="text-2xl font-medium mr-2.5">{resource.locale} | {resource.formFactor}</h2>
     {#if resource.diff.exists} <DiffBadge /> {/if}
-    <button 
-      disabled={!resource.diff.exists} 
+    <button
+      disabled={!resource.diff.exists}
       class="
-        btn
+        btn ml-auto focus:outline-none
         border-2 rounded border-current
         text-sm font-medium
         active:bg-gray-300 dark:active:bg-opacity-800 active:bg-opacity-30 disabled:active:bg-transparent
         disabled:cursor-not-allowed disabled:opacity-30"
       on:click={handleReplaceReferenceClick}
     >
-      <div class="btn-content rounded px-2 h-full w-full flex items-center" tabindex={-1}>
+      <div class="btn-content focus:outline-none rounded px-2 h-full w-full flex items-center" tabindex={-1}>
         Replace reference with latest
       </div>
     </button>
   </div>
-  <SnapshotTabBar tabIds={tabIds} bind:activeTab={$activeTab} />
-  <div class="p-5 content">
-    <div class={$activeTab === 'diff' && resource.diff.exists ? 'h-full w-full' : 'tab-container'}>
+  <SnapshotTabBar {tabIds} bind:activeTab={$activeTab} />
+  <div class="p-5 h-[75vh]">
+    <div class={$activeTab === 'diff' && resource.diff.exists ? 'h-full w-full' : 'h-[90%]'}>
       <SnapshotTab id={tabIds.reference} exists={resource.reference.exists} active={$activeTab === 'reference'}>
         <Image src={resource.reference.src} alt="Reference snapshot" />
       </SnapshotTab>
@@ -52,29 +56,18 @@
         <Image src={resource.latest.src} alt="Latest snapshot" />
       </SnapshotTab>
       <SnapshotTab id={tabIds.diff} exists={resource.diff.exists} active={$activeTab === 'diff'}>
-        <DiffContainer id={containerId} reference={resource.reference.src} latest={resource.latest.src} diff={resource.diff.src} />
+        <DiffContainer
+          id={containerId}
+          reference={resource.reference.src}
+          latest={resource.latest.src}
+          diff={resource.diff.src}
+        />
       </SnapshotTab>
     </div>
   </div>
 </div>
 
 <style>
-  .tab-container {
-    height: 90%;
-  }
-
-  .content {
-    height: 75vh;
-  }
-
-  .btn {
-    margin-left: auto;
-  }
-
-  .btn:focus, .btn-content:focus {
-    outline: none;
-  }
-
   .btn:focus > .btn-content {
     @apply ring ring-gray-400 ring-opacity-50 ring-offset-4 ring-offset-transparent;
   }
diff --git a/src/webview-ui/snapshot/SnapshotTab.svelte b/src/webview-ui/snapshot/SnapshotTab.svelte
index 89e9fea..0d5c003 100644
--- a/src/webview-ui/snapshot/SnapshotTab.svelte
+++ b/src/webview-ui/snapshot/SnapshotTab.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import NoResource from "../common/NoResource.svelte";
+  import NoResource from '../common/NoResource.svelte';
 
   export let exists = true;
   export let active = true;
diff --git a/src/webview-ui/snapshot/SnapshotTabBar.svelte b/src/webview-ui/snapshot/SnapshotTabBar.svelte
index c604045..6f295ee 100644
--- a/src/webview-ui/snapshot/SnapshotTabBar.svelte
+++ b/src/webview-ui/snapshot/SnapshotTabBar.svelte
@@ -4,17 +4,13 @@
 
 <script lang="ts">
   export let activeTab: TabType = 'reference';
-  export let tabIds: { reference: string, latest: string, diff: string };
+  export let tabIds: { reference: string; latest: string; diff: string };
 
-  $: tabHighlightPos = (
-    activeTab === 'reference' ? 0 * 7
-    : activeTab === 'latest' ? 1 * 7
-    : 2 * 7
-  );
+  $: tabHighlightPos = activeTab === 'reference' ? 0 * 7 : activeTab === 'latest' ? 1 * 7 : 2 * 7;
 
   const handleTabClick = (event: MouseEvent) => {
     activeTab = (event.currentTarget as HTMLButtonElement).dataset.snapshotTab as TabType;
-  }
+  };
 
   const tabTypes: TabType[] = ['reference', 'latest', 'diff'];
 </script>
@@ -22,30 +18,27 @@
 <div class="border-b dark:border-white dark:border-opacity-20 relative">
   <div role="tablist">
     {#each tabTypes as tab}
-      <button 
-        class="text-sm font-medium uppercase w-28 btn" 
+      <button
+        class="text-sm font-medium uppercase w-28 focus:outline-none btn"
         data-snapshot-tab={tab}
         role="tab"
         aria-selected={activeTab === tab}
         aria-controls={tabIds[tab]}
-        tabindex={0} 
+        tabindex={0}
         on:click={handleTabClick}
       >
-        <div class="p-3 btn-content" tabindex={-1}>{tab}</div>
+        <div class="p-3 focus:outline-none btn-content" tabindex={-1}>{tab}</div>
       </button>
     {/each}
   </div>
   <div
     data-testid="selected-highlight"
     class="h-0.5 w-28 bg-lightBlue-500 absolute bottom-0 transition-all"
-    style={`left: ${tabHighlightPos}rem`} />
+    style={`left: ${tabHighlightPos}rem`}
+  />
 </div>
 
 <style lang="postcss">
-  .btn:focus, .btn-content:focus {
-    outline: none;
-  }
-
   .btn:focus > .btn-content {
     @apply ring ring-lightBlue-200;
   }
diff --git a/src/webview-ui/tailwind/Base.svelte b/src/webview-ui/tailwind/Base.svelte
deleted file mode 100644
index 162a88e..0000000
--- a/src/webview-ui/tailwind/Base.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style global lang="postcss">
-  @tailwind base;
-</style>
\ No newline at end of file
diff --git a/src/webview-ui/tailwind/Components.svelte b/src/webview-ui/tailwind/Components.svelte
deleted file mode 100644
index 6dcad39..0000000
--- a/src/webview-ui/tailwind/Components.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style global lang="postcss">
-  @tailwind components;
-</style>
\ No newline at end of file
diff --git a/src/webview-ui/tailwind/Utilities.svelte b/src/webview-ui/tailwind/Utilities.svelte
deleted file mode 100644
index c191b1d..0000000
--- a/src/webview-ui/tailwind/Utilities.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style global lang="postcss">
-  @tailwind utilities;
-</style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 3178af8..ecbe4a5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
+  mode: 'jit',
   darkMode: 'class',
   theme: {
     extend: {
@@ -9,15 +10,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      backgroundColor: ['active'],
-      borderWidth: ['last'],
-      margin: ['last'],
-    },
-  },
-  purge: {
-    content: ['./src/webview-ui/**/*.svelte'],
-    enabled: process.env.NODE_ENV !== 'development',
-  },
+  purge: ['./src/webview-ui/**/*.svelte']
 };