install tailwindcss and daisyui

aster-void · aster-void · commit 0e7ba37f8a7e · 2025-05-10T00:37:37.000+09:00
diff --git a/bun.lock b/bun.lock
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 	%sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data="hover" style="margin: 0px; overflow: hidden;">
+<body data-sveltekit-preload-data="hover" style="margin: 0px; overflow: hidden;" data-theme="light">
 	<div style="display: contents">%sveltekit.body%</div>
 </body>
 
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.20.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.1.6",
+    "daisyui": "^5.0.35",
     "lefthook": "^1.11.12",
     "svelte": "^5.28.2",
     "svelte-check": "^4.1.6",
diff --git a/routes/+layout.svelte b/routes/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+import "@/ui-components/app.css";
+import type { Snippet } from "svelte";
+
+type Props = {
+  children: Snippet;
+};
+const { children }: Props = $props();
+</script>
+
+{@render children()}
diff --git a/src/ui-components/Game.svelte b/src/ui-components/Game.svelte
@@ -38,7 +38,7 @@ $effect(() => {
 onDestroy(() => bindings.ondestroy());
 </script>
 
-<div bind:this={container} class="container">
+<div bind:this={container} id="container">
   <PauseMenu
     paused={uiContext.paused}
     onpause={() => bindings.onpause()}
@@ -84,7 +84,7 @@ onDestroy(() => bindings.ondestroy());
 </div>
 
 <style>
-  .container {
+  #container {
     width: 100dvw;
     height: 100dvh;
     overflow: hidden;
diff --git a/src/ui-components/PauseMenu.svelte b/src/ui-components/PauseMenu.svelte
@@ -23,18 +23,26 @@ document.addEventListener("keydown", (ev) => {
 });
 </script>
 
-<dialog bind:this={el} onclose={onresume}>
-  <div class="uiBackground menu">
-    <span style="font-size: 2rem;">Paused</span>
+<dialog bind:this={el} onclose={onresume} class="modal">
+  <div class="uiBackground modal-box flex flex-col gap-1">
+    <h1 class="text-4xl text-center">Paused</h1>
     <!-- todo: ボタンのスタイル -->
-    <form method="dialog">
-      <button style="font-size: 1.5rem;" type="submit"> Resume </button>
+    <form method="dialog" class="w-full">
+      <button style="font-size: 1.5rem;" class="btn btn-block" type="submit">
+        Resume
+      </button>
     </form>
     <!-- TODO; これもうちょいパフォーマンスいいやつにしたい -->
-    <button style="font-size: 1.5rem;" onclick={() => window.location.reload()}>
+    <button
+      style="font-size: 1.5rem;"
+      class="btn btn-block"
+      onclick={() => window.location.reload()}
+    >
       Restart
     </button>
-    <a style="font-size: 1.5rem;" href="/"> Back to Stage Select </a>
+    <a style="font-size: 1.5rem;" class="btn btn-block" href="/">
+      Back to Stage Select
+    </a>
   </div>
 </dialog>
 
@@ -44,19 +52,4 @@ document.addEventListener("keydown", (ev) => {
     backdrop-filter: blur(2px);
     padding: 0.75rem 1rem;
   }
-  .menu {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    margin: auto;
-    align-items: center;
-    width: max-content;
-    height: max-content;
-    gap: 0.5rem;
-    border-radius: 1rem;
-  }
 </style>
diff --git a/src/ui-components/app.css b/src/ui-components/app.css
@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  /* biome-ignore lint: daisyui prop */
+  themes: "light";
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,9 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), tailwindcss()],
   build: {
     target: "esnext",
   },
