add tailwind to frontend

frontend/src/App.svelte

@@ -1,64 +1,9 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import svelteLogo from "./assets/svelte.svg";
-	import viteLogo from "./assets/vite.svg";
-	import Counter from "./lib/Counter.svelte";
-	import type { MeAccount } from "./lib/api/account";
-
-	let account: MeAccount | null = null;
-
-	onMount(() => {
-		const accountData = document.getElementById("accountData");
-		account = JSON.parse(accountData.innerHTML) as MeAccount;
-	});
+	import { meAccount } from "./lib/store";
 </script>
 
 <main>
-	<div>
-		<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-			<img src={viteLogo} class="logo" alt="Vite Logo" />
-		</a>
-		<a href="https://svelte.dev" target="_blank" rel="noreferrer">
-			<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-		</a>
-	</div>
-	<h1>Vite + Svelte + Go</h1>
-
-	<div class="card">
-		<Counter />
-	</div>
-
 	<p>
-		Check out <a
-			href="https://github.com/sveltejs/kit#readme"
-			target="_blank"
-			rel="noreferrer">SvelteKit</a
-		>, the official Svelte app framework powered by Vite!
+		Username: {$meAccount.username}, ID: {$meAccount.id}
 	</p>
-
-	{#if account}
-		<p>
-			Username: {account.username}, ID: {account.id}
-		</p>
-	{/if}
-
-	<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
 </main>
-
-<style>
-	.logo {
-		height: 6em;
-		padding: 1.5em;
-		will-change: filter;
-		transition: filter 300ms;
-	}
-	.logo:hover {
-		filter: drop-shadow(0 0 2em #646cffaa);
-	}
-	.logo.svelte:hover {
-		filter: drop-shadow(0 0 2em #ff3e00aa);
-	}
-	.read-the-docs {
-		color: #888;
-	}
-</style>

frontend/src/app.css

@@ -1,80 +1,3 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-}
-
-a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-}
-a:hover {
-	color: #535bf2;
-}
-
-body {
-	margin: 0;
-	display: flex;
-	place-items: center;
-	min-width: 320px;
-	min-height: 100vh;
-}
-
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
-.card {
-	padding: 2em;
-}
-
-#app {
-	max-width: 1280px;
-	margin: 0 auto;
-	padding: 2rem;
-	text-align: center;
-}
-
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	background-color: #1a1a1a;
-	cursor: pointer;
-	transition: border-color 0.25s;
-}
-button:hover {
-	border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/lib/store.ts

@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+import type { MeAccount } from "./api/account";
+
+export const meAccount = writable(
+	JSON.parse(document.getElementById("accountData").innerHTML) as MeAccount,
+);