tailwind chooseworld

src/components/WorldLink.svelte

@@ -6,11 +6,14 @@
 
   /** @type {import("../lib/doc").WorldIdentifier} */
   export let world;
+  /** @type {string} */
+  export let className = "";
 
   $: title = titleStore(getWorldY(world).ydoc, "page/index");
 </script>
 
 <a
+  class={className}
   href={inject(routes.Page, {
     worldId: world.room,
     pageId: "index",

src/views/ChooseWorld.svelte

@@ -6,28 +6,26 @@
   const worldsPromise = loadWorlds();
 </script>
 
-<h1>Buen día.</h1>
+<header class="my-4 mx-8">
+  <h1 class="font-bold text-3xl">Buen día.</h1>
   <h3>Elegí un mundo.</h3>
+</header>
 
 {#await worldsPromise then worlds}
-  <ul>
+  <ul class="m-4">
     {#each worlds as world}
       <li>
-        <WorldLink {world} />
+        <WorldLink
+          className="px-6 py-4 bg-slate-200 w-full block rounded-2xl my-4 shadow text-xl"
+          {world}
+        />
       </li>
     {/each}
-    <li><a href={routes.CreateWorld}>Crear mundo</a></li>
+    <li>
+      <a
+        class="px-6 py-4 bg-slate-200 w-full block rounded-2xl my-4 shadow text-xl"
+        href={routes.CreateWorld}>Crear mundo</a
+      >
+    </li>
   </ul>
 {/await}
-
-<style>
-  ul :global(a) {
-    background: ButtonFace;
-    color: ButtonText;
-
-    display: block;
-    padding: 1em;
-    margin: 0.5em;
-    border-radius: 15px;
-  }
-</style>