Using tailwind instead of scss as much as possible

src/tailwind.css

@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-width: 0;
+    border-style: solid;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    font-family: Inter, Roboto, Arial, sans-serif;
+    background-color: var(--app-bg);
+    color: var(--app-fg);
+    transition: background-color 220ms ease, color 220ms ease;
+  }
+
+  a {
+    @apply text-link no-underline font-medium hover:text-link-hover hover:underline;
+  }
+
+  .material-symbols-outlined {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+  }
+
+  .dark body {
+    background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
+  }
+
+  canvas {
+    @apply border-none block mx-auto max-w-full;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  }
+
+  .dark canvas {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+}
+
+@layer components {
+  .legend-swatch {
+    @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
+  }
+
+  .card-gradient-bar {
+    @apply relative;
+  }
+
+  .card-gradient-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+}