config/config.exs

@@ -70,8 +70,8 @@ config :tailwind,
   version: "4.0.0",
   cannery: [
     args: ~w(
-      --input=css/style.css
-      --output=../priv/static/assets/style.css
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
   ]

lib/cannery_web/components/layouts/root.html.heex

@@ -8,7 +8,7 @@
     <.live_title suffix={" | #{gettext("Cannery")}"}>
       {assigns[:page_title] || gettext("Cannery")}
     </.live_title>
-    <link phx-track-static rel="stylesheet" href={~p"/assets/style.css"} />
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>

lib/cannery_web/live/home_live.html.heex

@@ -1,16 +1,16 @@
-<div class="flex flex-col justify-center items-center px-8 mx-auto space-y-4 max-w-3xl text-center sm:px-16">
+<div class="mx-auto px-8 sm:px-16 flex flex-col justify-center items-center text-center space-y-4 max-w-3xl">
   <img
     src={~p"/images/cannery.svg"}
     alt={gettext("Cannery logo")}
-    class="inline-block pt-2 pb-0 mb-8 w-32 transition-all duration-500 ease-in-out hover:pt-0 hover:pb-2"
+    class="inline-block w-32 hover:-mt-2 hover:mb-2 transition-all duration-500 ease-in-out"
     title={gettext("isn't he cute >:3")}
   />
 
-  <h1 class="text-2xl title text-primary-600">
+  <h1 class="title text-primary-600 text-2xl">
     {gettext("Welcome to Cannery")}
   </h1>
 
-  <h2 class="text-lg title text-primary-600">
+  <h2 class="title text-primary-600 text-lg">
     {gettext("The self-hosted firearm tracker website")}
   </h2>
 
@@ -48,8 +48,8 @@
 
   <hr class="hr" />
 
-  <ul class="flex flex-col justify-center space-y-2 text-center">
-    <h2 class="text-lg title text-primary-600">
+  <ul class="flex flex-col space-y-2 text-center justify-center">
+    <h2 class="title text-primary-600 text-lg">
       {gettext("Instance Information")}
     </h2>
 
@@ -104,8 +104,8 @@
 
   <hr class="hr" />
 
-  <ul class="flex flex-col justify-center space-y-2 text-center">
-    <h2 class="text-lg title text-primary-600">
+  <ul class="flex flex-col space-y-2 text-center justify-center">
+    <h2 class="title text-primary-600 text-lg">
       {gettext("Get involved!")}
     </h2>