feat: enable tailwind, committing out.css for now

pages/templates/base.gohtml

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link href="/static/static/public/out.css" rel="stylesheet">
     <!-- Place favicon.ico in the root directory -->
     <script
       defer
@@ -22,8 +23,8 @@
         <a href="http://browsehappy.com/">upgrade your browser</a> to improve
         your experience.
     <![endif]-->
-    <nav>
-      <p>Using SSR and oauth with pocketbase as Go framework</p>
+    <nav class="bg-blue-300 flex flex-row p-4 gap-x-4">
+      <h2 class="text-lg font-bold flex-1">Using SSR and oauth with pocketbase as Go framework</h2>
       {{ if .NavInfo.IsGuest }}
       <button id="openAuth">Authenticate</button>
       <dialog id="authDialog">
@@ -91,10 +92,10 @@
         // document.addEventListener("DOMContentLoaded", initAuthDialog);
       </script>
       {{ else }}
-      <p>{{ .NavInfo.Username }}</p>
+      <p>Logged in as: {{ .NavInfo.Username }}</p>
       <button hx-get="/logout">Logout</button>
       {{ end }}
     </nav>
-    <main hx-boost="true">{{ template "content" . }}</main>
+    <main hx-boost="true">{{ template "main" . }}</main>
   </body>
 </html>

pages/templates/index.gohtml

@@ -2,16 +2,18 @@
   Index page
 {{ end }}
 
-{{ define "content" }}
-  <h1>Welcome to index page</h1>
+{{ define "main" }}
+<main hx-boost="true" class="px-10 pt-10 flex flex-col gap-y-10">
+  <h1 class="text-2xl font-bold">Welcome to index page</h1>
   {{ if not .NavInfo.IsGuest }}
   <p>This is content only for authenticated users! Congratulations!</p>
   <ul>
     <li>
-      <a href="/somepage">Link to page only for logged in users</a>
+      <a href="/somepage" class="text-blue-500 visited:text-purple-500 underline">Link to page only for logged in users</a>
     </li>
   </ul>
   {{ else }}
   <p>There will be some content only for authorized users</p>
   {{ end }}
+</main>
 {{ end }}

pages/templates/somepage.gohtml

@@ -2,8 +2,9 @@
     Some page with content
 {{ end }}
 
-{{ define "content" }}
-    <h1>This is another page</h1>
+{{ define "main" }}
+<main class="flex flex-col gap-y-4 p-10 ">
+    <h1 class="text-2xl">This is another page</h1>
     <p>Will be rendered on server</p>
     <p>and locked under apis.RequireAdminOrRecordAuth default middleware</p>
     <p>here are some random numbers</p>
@@ -11,4 +12,5 @@
         <li>{{ .RandomNumber }}</li>
         <li>{{ .RandomString }}</li>
     </ul>
+</main>
 {{ end }}