From 27320c57d8ad169de3fd9b0a4ef3c7810c63572a Mon Sep 17 00:00:00 2001
From: Reed von Redwitz <reed+github@vonredwitz.com>
Date: Wed, 13 Dec 2023 19:33:56 +0100
Subject: [PATCH] chore: upgrade to Fresh 1.6.1 and std 0.208.0 (#646)

closes https://github.com/denoland/saaskit/issues/644

I see the guidelines have changed since I last contributed (thanks
github!) and that caused me to look for an issue. Fortunately there was
the above, but I see you want tailwind as well. I'll open this as a
draft for now.

---------

Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>
---
 README.md                     |   2 +-
 components/Footer.tsx         |  23 +++----
 components/Header.tsx         |  33 ++++------
 components/TabsBar.tsx        |  12 ++--
 deno.json                     |  14 ++---
 e2e_test.ts                   |  74 +++++++++++-----------
 fresh.config.ts               |   5 +-
 fresh.gen.ts                  | 115 +++++++++++++++++-----------------
 islands/ItemsList.tsx         |   7 +--
 islands/UsersTable.tsx        |   5 +-
 plugins/error_handling.ts     |  11 ++--
 plugins/session.ts            |   6 +-
 routes/_404.tsx               |   5 +-
 routes/_500.tsx               |   9 ++-
 routes/_app.tsx               |  29 ++++++---
 routes/account/index.tsx      |   7 +--
 routes/api/stripe-webhooks.ts |   7 ++-
 routes/api/vote.ts            |   5 +-
 routes/blog/index.tsx         |   3 +-
 routes/dashboard/stats.tsx    |   3 +-
 routes/dashboard/users.tsx    |   3 +-
 routes/pricing.tsx            |  13 ++--
 routes/submit.tsx             |   9 ++-
 routes/users/[login].tsx      |   3 +-
 routes/welcome.tsx            |   2 +-
 static/styles.css             |  42 +++++++++++++
 tailwind.config.ts            |  20 ++++++
 twind.config.ts               |  33 ----------
 utils/constants.ts            |  21 -------
 utils/github_test.ts          |   4 +-
 utils/http.ts                 |   4 +-
 utils/http_test.ts            |   4 +-
 32 files changed, 259 insertions(+), 274 deletions(-)
 create mode 100644 static/styles.css
 create mode 100644 tailwind.config.ts
 delete mode 100644 twind.config.ts

diff --git a/README.md b/README.md
index c781fe2ce..337eb3ea6 100644
--- a/README.md
+++ b/README.md
@@ -173,7 +173,7 @@ See other examples of blog post files in [/posts](/posts).
 
 You can customize theme options such as spacing, color, etc. By default, Deno
 SaaSKit comes with `primary` and `secondary` colors predefined within
-`twind.config.ts`. Change these values to match your desired color scheme.
+`tailwind.config.ts`. Change these values to match your desired color scheme.
 
 ### Cover Image
 
diff --git a/components/Footer.tsx b/components/Footer.tsx
index e8d38b2a3..05039f3e7 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,12 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  NAV_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
-import { cx } from "@twind/core";
+import { SITE_NAME } from "@/utils/constants.ts";
 import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
 import IconRss from "tabler_icons_tsx/rss.tsx";
@@ -66,25 +59,23 @@ export interface FooterProps {
 
 export default function Footer(props: FooterProps) {
   return (
-    <footer
-      class={`${SITE_BAR_STYLES} flex-col md:flex-row mt-8`}
-    >
+    <footer class="site-bar-styles flex-col md:flex-row mt-8">
       <p>© {SITE_NAME}</p>
-      <nav class={NAV_STYLES}>
+      <nav class="nav-styles">
         <a
           href="/blog"
-          class={cx(LINK_STYLES, ACTIVE_LINK_STYLES)}
+          class="link-styles data-[current]:!text-black data-[current]:dark:!text-white"
         >
           Blog
         </a>
-        <a href="/feed" aria-label="Deno Hunt RSS Feed" class={LINK_STYLES}>
+        <a href="/feed" aria-label="Deno Hunt RSS Feed" class="link-styles">
           <IconRss class="h-6 w-6" />
         </a>
         <a
           href="https://discord.gg/deno"
           target="_blank"
           aria-label="Deno SaaSKit on Discord"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandDiscord class="h-6 w-6" />
         </a>
@@ -92,7 +83,7 @@ export default function Footer(props: FooterProps) {
           href="https://github.com/denoland/saaskit"
           target="_blank"
           aria-label="Deno SaaSKit repo on GitHub"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandGithub class="h-6 w-6" />
         </a>
diff --git a/components/Header.tsx b/components/Header.tsx
index ec1bd67b6..a29d165aa 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,15 +1,8 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_ANCESTOR_LINK_STYLES,
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
+import { SITE_NAME } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import IconX from "tabler_icons_tsx/x.tsx";
 import IconMenu from "tabler_icons_tsx/menu-2.tsx";
-import { cx } from "@twind/core";
 import { User } from "@/utils/db.ts";
 
 export interface HeaderProps {
@@ -23,14 +16,8 @@ export interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const NAV_ITEM = "text-gray-500 px-3 py-4 sm:py-2";
   return (
-    <header
-      class={cx(
-        SITE_BAR_STYLES,
-        "flex-col sm:flex-row",
-      )}
-    >
+    <header class="site-bar-styles flex-col sm:flex-row">
       <input
         type="checkbox"
         id="nav-toggle"
@@ -71,11 +58,11 @@ export default function Header(props: HeaderProps) {
         `}
       </script>
       <nav
-        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:(flex items-center flex-row divide-y-0)"}
+        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:flex sm:items-center sm:flex-row sm:divide-y-0"}
       >
         <a
           href="/dashboard"
-          class={cx(LINK_STYLES, ACTIVE_ANCESTOR_LINK_STYLES, NAV_ITEM)}
+          class="link-styles data-[ancestor]:!text-black data-[ancestor]:dark:!text-white nav-item"
         >
           Dashboard
         </a>
@@ -83,7 +70,7 @@ export default function Header(props: HeaderProps) {
           (
             <a
               href="/pricing"
-              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:dark:!text-white nav-item"
             >
               Pricing
             </a>
@@ -92,16 +79,20 @@ export default function Header(props: HeaderProps) {
           ? (
             <a
               href="/account"
-              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:dark:!text-white nav-item"
             >
               Account
             </a>
           )
-          : <a href="/signin" class={cx(LINK_STYLES, NAV_ITEM)}>Sign in</a>}
+          : (
+            <a href="/signin" class="link-styles nav-item">
+              Sign in
+            </a>
+          )}
         <div class="rounded-lg bg-gradient-to-tr from-secondary to-primary p-px">
           <a
             href="/submit"
-            class="text-center text-white rounded-[7px] transition duration-300 px-4 py-2 block hover:(bg-white text-black dark:(bg-gray-900 !text-white))"
+            class="text-center text-white rounded-[7px] transition duration-300 px-4 py-2 block hover:bg-white hover:text-black hover:dark:bg-gray-900 hover:dark:!text-white"
           >
             Submit
           </a>
diff --git a/components/TabsBar.tsx b/components/TabsBar.tsx
index b69c43371..79949b2c6 100644
--- a/components/TabsBar.tsx
+++ b/components/TabsBar.tsx
@@ -1,6 +1,4 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { LINK_STYLES } from "@/utils/constants.ts";
-import { cx } from "@twind/core";
 import { ComponentChildren } from "preact";
 
 export interface TabItemProps {
@@ -15,13 +13,11 @@ export function TabItem(props: TabItemProps) {
   return (
     <a
       href={props.path}
-      class={cx(
-        "px-4 py-2 rounded-lg",
+      class={`px-4 py-2 rounded-lg ${
         props.active
-          ? "bg-gray-100 text-black dark:(bg-gray-800 text-white)"
-          : "",
-        LINK_STYLES,
-      )}
+          ? "bg-gray-100 text-black dark:bg-gray-800 dark:text-white"
+          : ""
+      } link-styles`}
     >
       {props.children}
     </a>
diff --git a/deno.json b/deno.json
index a2d403d8e..3fc4989c0 100644
--- a/deno.json
+++ b/deno.json
@@ -22,21 +22,21 @@
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "imports": {
     "@/": "./",
-    "$fresh/": "https://deno.land/x/fresh@1.5.4/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
     "$gfm": "https://deno.land/x/gfm@0.2.5/mod.ts",
-    "preact": "https://esm.sh/preact@10.18.1",
-    "preact/": "https://esm.sh/preact@10.18.1/",
+    "preact": "https://esm.sh/preact@10.19.2",
+    "preact/": "https://esm.sh/preact@10.19.2/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
-    "twind-preset-tailwind/": "https://esm.sh/@twind/preset-tailwind@1.1.4/",
-    "twind-preset-ext": "https://esm.sh/@twind/preset-ext@1.0.7/",
-    "std/": "https://deno.land/std@0.205.0/",
+    "tailwindcss": "npm:tailwindcss@3.3.5",
+    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+    "std/": "https://deno.land/std@0.208.0/",
     "stripe": "npm:/stripe@13.5.0",
     "feed": "npm:/feed@4.2.2",
     "kv_oauth/": "https://deno.land/x/deno_kv_oauth@v0.9.1/",
     "tabler_icons_tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/",
-    "@twind/core": "https://esm.sh/@twind/core@1.1.3",
     "fresh_charts/": "https://deno.land/x/fresh_charts@0.3.1/"
   },
   "exclude": ["cov/", "_fresh/", "**/_fresh/*"],
diff --git a/e2e_test.ts b/e2e_test.ts
index 4098aea54..76a561096 100644
--- a/e2e_test.ts
+++ b/e2e_test.ts
@@ -1,6 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 
-import { createHandler, Status } from "$fresh/server.ts";
+import { createHandler } from "$fresh/server.ts";
 import manifest from "@/fresh.gen.ts";
 import {
   collectValues,
@@ -24,7 +24,7 @@ import {
   assertObjectMatch,
   assertStringIncludes,
 } from "std/assert/mod.ts";
-import { isRedirectStatus } from "std/http/status.ts";
+import { isRedirectStatus, STATUS_CODE } from "std/http/status.ts";
 import { resolvesNext, returnsNext, stub } from "std/testing/mock.ts";
 import Stripe from "stripe";
 import options from "./fresh.config.ts";
@@ -94,7 +94,7 @@ Deno.test("[e2e] security headers", async () => {
 Deno.test("[e2e] GET /", async () => {
   const resp = await handler(new Request("http://localhost"));
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertHtml(resp);
 });
 
@@ -184,7 +184,7 @@ Deno.test("[e2e] GET /blog", async () => {
     new Request("http://localhost/blog"),
   );
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertHtml(resp);
 });
 
@@ -192,7 +192,7 @@ Deno.test("[e2e] GET /pricing", async () => {
   const req = new Request("http://localhost/pricing");
   const resp = await handler(req);
 
-  assertEquals(resp.status, Status.NotFound);
+  assertEquals(resp.status, STATUS_CODE.NotFound);
   assertHtml(resp);
 });
 
@@ -255,7 +255,7 @@ Deno.test("[e2e] GET /dashboard/stats", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertHtml(resp);
     assertStringIncludes(await resp.text(), "<!--frsh-chart_default");
   });
@@ -279,7 +279,7 @@ Deno.test("[e2e] GET /dashboard/users", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertHtml(resp);
     assertStringIncludes(await resp.text(), "<!--frsh-userstable_default");
   });
@@ -290,7 +290,7 @@ Deno.test("[e2e] GET /submit", async () => {
     new Request("http://localhost/submit"),
   );
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertHtml(resp);
 });
 
@@ -299,7 +299,7 @@ Deno.test("[e2e] GET /feed", async () => {
     new Request("http://localhost/feed"),
   );
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertXml(resp);
 });
 
@@ -312,7 +312,7 @@ Deno.test("[e2e] GET /api/items", async () => {
   const resp = await handler(req);
   const { values } = await resp.json();
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertJson(resp);
   assertArrayIncludes(values, [item1, item2]);
 });
@@ -391,7 +391,7 @@ Deno.test("[e2e] GET /api/items/[id]", async (test) => {
   await test.step("serves not found response if item not found", async () => {
     const resp = await handler(req);
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertEquals(await resp.text(), "Item not found");
   });
 
@@ -399,7 +399,7 @@ Deno.test("[e2e] GET /api/items/[id]", async (test) => {
     await createItem(item);
     const resp = await handler(req);
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertJson(resp);
     assertEquals(await resp.json(), item);
   });
@@ -416,7 +416,7 @@ Deno.test("[e2e] GET /api/users", async () => {
 
   const { values } = await resp.json();
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertJson(resp);
   assertArrayIncludes(values, [user1, user2]);
 });
@@ -428,7 +428,7 @@ Deno.test("[e2e] GET /api/users/[login]", async (test) => {
   await test.step("serves not found response if user not found", async () => {
     const resp = await handler(req);
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "User not found");
   });
@@ -437,7 +437,7 @@ Deno.test("[e2e] GET /api/users/[login]", async (test) => {
     await createUser(user);
     const resp = await handler(req);
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertJson(resp);
     assertEquals(await resp.json(), user);
   });
@@ -454,7 +454,7 @@ Deno.test("[e2e] GET /api/users/[login]/items", async (test) => {
   await test.step("serves not found response if user not found", async () => {
     const resp = await handler(req);
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "User not found");
   });
@@ -465,7 +465,7 @@ Deno.test("[e2e] GET /api/users/[login]/items", async (test) => {
     const resp = await handler(req);
     const { values } = await resp.json();
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertJson(resp);
     assertArrayIncludes(values, [item]);
   });
@@ -481,7 +481,7 @@ Deno.test("[e2e] POST /api/vote", async (test) => {
   await test.step("serves unauthorized response if the session user is not signed in", async () => {
     const resp = await handler(new Request(url, { method: "POST" }));
 
-    assertEquals(resp.status, Status.Unauthorized);
+    assertEquals(resp.status, STATUS_CODE.Unauthorized);
     assertText(resp);
     assertEquals(await resp.text(), "User must be signed in");
   });
@@ -494,7 +494,7 @@ Deno.test("[e2e] POST /api/vote", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "Item not found");
   });
@@ -509,7 +509,7 @@ Deno.test("[e2e] POST /api/vote", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.Created);
+    assertEquals(resp.status, STATUS_CODE.Created);
   });
 
   await test.step("serves an error response if the `item_id` URL parameter is missing", async () => {
@@ -520,7 +520,7 @@ Deno.test("[e2e] POST /api/vote", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.BadRequest);
+    assertEquals(resp.status, STATUS_CODE.BadRequest);
     assertEquals(await resp.text(), "`item_id` URL parameter missing");
   });
 });
@@ -553,7 +553,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
     Deno.env.delete("STRIPE_SECRET_KEY");
     const resp = await handler(new Request(url, { method: "POST" }));
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "Not Found");
   });
@@ -562,7 +562,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
     Deno.env.set("STRIPE_SECRET_KEY", crypto.randomUUID());
     const resp = await handler(new Request(url, { method: "POST" }));
 
-    assertEquals(resp.status, Status.BadRequest);
+    assertEquals(resp.status, STATUS_CODE.BadRequest);
     assertText(resp);
     assertEquals(await resp.text(), "`Stripe-Signature` header is missing");
   });
@@ -576,7 +576,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.InternalServerError);
+    assertEquals(resp.status, STATUS_CODE.InternalServerError);
     assertText(resp);
     assertEquals(
       await resp.text(),
@@ -593,7 +593,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.BadRequest);
+    assertEquals(resp.status, STATUS_CODE.BadRequest);
     assertText(resp);
     assertEquals(
       await resp.text(),
@@ -619,7 +619,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
 
     constructEventAsyncStub.restore();
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "User not found");
   });
@@ -648,7 +648,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
 
     constructEventAsyncStub.restore();
 
-    assertEquals(resp.status, Status.Created);
+    assertEquals(resp.status, STATUS_CODE.Created);
     assertEquals(await getUser(user.login), { ...user, isSubscribed: true });
   });
 
@@ -670,7 +670,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
 
     constructEventAsyncStub.restore();
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertText(resp);
     assertEquals(await resp.text(), "User not found");
   });
@@ -700,7 +700,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
     constructEventAsyncStub.restore();
 
     assertEquals(await getUser(user.login), { ...user, isSubscribed: false });
-    assertEquals(resp.status, Status.Accepted);
+    assertEquals(resp.status, STATUS_CODE.Accepted);
   });
 
   await test.step("serves bad request response if the event type is not supported", async () => {
@@ -721,7 +721,7 @@ Deno.test("[e2e] POST /api/stripe-webhooks", async (test) => {
 
     constructEventAsyncStub.restore();
 
-    assertEquals(resp.status, Status.BadRequest);
+    assertEquals(resp.status, STATUS_CODE.BadRequest);
     assertText(resp);
     assertEquals(await resp.text(), "Event type not supported");
   });
@@ -746,7 +746,7 @@ Deno.test("[e2e] GET /account", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertHtml(resp);
     assertStringIncludes(await resp.text(), 'href="/account/upgrade"');
   });
@@ -761,7 +761,7 @@ Deno.test("[e2e] GET /account", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.OK);
+    assertEquals(resp.status, STATUS_CODE.OK);
     assertHtml(resp);
     assertStringIncludes(await resp.text(), 'href="/account/manage"');
   });
@@ -786,7 +786,7 @@ Deno.test("[e2e] GET /account/manage", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertHtml(resp);
   });
 
@@ -836,7 +836,7 @@ Deno.test("[e2e] GET /account/upgrade", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.InternalServerError);
+    assertEquals(resp.status, STATUS_CODE.InternalServerError);
     assertHtml(resp);
   });
 
@@ -849,7 +849,7 @@ Deno.test("[e2e] GET /account/upgrade", async (test) => {
       }),
     );
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertHtml(resp);
   });
 
@@ -874,7 +874,7 @@ Deno.test("[e2e] GET /account/upgrade", async (test) => {
 
     sessionsCreateStub.restore();
 
-    assertEquals(resp.status, Status.NotFound);
+    assertEquals(resp.status, STATUS_CODE.NotFound);
     assertHtml(resp);
   });
 
@@ -926,7 +926,7 @@ Deno.test("[e2e] GET /api/me/votes", async () => {
   );
   const body = await resp.json();
 
-  assertEquals(resp.status, Status.OK);
+  assertEquals(resp.status, STATUS_CODE.OK);
   assertJson(resp);
   assertArrayIncludes(body, [{ ...item1, score: 1 }, { ...item2, score: 1 }]);
 });
diff --git a/fresh.config.ts b/fresh.config.ts
index e67b9b631..49dc2415b 100644
--- a/fresh.config.ts
+++ b/fresh.config.ts
@@ -1,6 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import twindPlugin from "$fresh/plugins/twindv1.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 import kvOAuthPlugin from "./plugins/kv_oauth.ts";
 import sessionPlugin from "./plugins/session.ts";
 import errorHandling from "./plugins/error_handling.ts";
@@ -13,7 +12,7 @@ export default {
     welcomePlugin,
     kvOAuthPlugin,
     sessionPlugin,
-    twindPlugin(twindConfig),
+    tailwind(),
     errorHandling,
     securityHeaders,
   ],
diff --git a/fresh.gen.ts b/fresh.gen.ts
index bd0373896..7045ab134 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -2,69 +2,70 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from "./routes/_404.tsx";
-import * as $1 from "./routes/_500.tsx";
-import * as $2 from "./routes/_app.tsx";
-import * as $3 from "./routes/account/index.tsx";
-import * as $4 from "./routes/account/manage.ts";
-import * as $5 from "./routes/account/upgrade.ts";
-import * as $6 from "./routes/api/items/[id].ts";
-import * as $7 from "./routes/api/items/index.ts";
-import * as $8 from "./routes/api/me/votes.ts";
-import * as $9 from "./routes/api/stripe-webhooks.ts";
-import * as $10 from "./routes/api/users/[login]/index.ts";
-import * as $11 from "./routes/api/users/[login]/items.ts";
-import * as $12 from "./routes/api/users/index.ts";
-import * as $13 from "./routes/api/vote.ts";
-import * as $14 from "./routes/blog/[slug].tsx";
-import * as $15 from "./routes/blog/index.tsx";
-import * as $16 from "./routes/dashboard/index.tsx";
-import * as $17 from "./routes/dashboard/stats.tsx";
-import * as $18 from "./routes/dashboard/users.tsx";
-import * as $19 from "./routes/feed.ts";
-import * as $20 from "./routes/index.tsx";
-import * as $21 from "./routes/pricing.tsx";
-import * as $22 from "./routes/submit.tsx";
-import * as $23 from "./routes/users/[login].tsx";
-import * as $24 from "./routes/welcome.tsx";
-import * as $$0 from "./islands/Chart.tsx";
-import * as $$1 from "./islands/ItemsList.tsx";
-import * as $$2 from "./islands/UsersTable.tsx";
+import * as $_404 from "./routes/_404.tsx";
+import * as $_500 from "./routes/_500.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $account_index from "./routes/account/index.tsx";
+import * as $account_manage from "./routes/account/manage.ts";
+import * as $account_upgrade from "./routes/account/upgrade.ts";
+import * as $api_items_id_ from "./routes/api/items/[id].ts";
+import * as $api_items_index from "./routes/api/items/index.ts";
+import * as $api_me_votes from "./routes/api/me/votes.ts";
+import * as $api_stripe_webhooks from "./routes/api/stripe-webhooks.ts";
+import * as $api_users_login_index from "./routes/api/users/[login]/index.ts";
+import * as $api_users_login_items from "./routes/api/users/[login]/items.ts";
+import * as $api_users_index from "./routes/api/users/index.ts";
+import * as $api_vote from "./routes/api/vote.ts";
+import * as $blog_slug_ from "./routes/blog/[slug].tsx";
+import * as $blog_index from "./routes/blog/index.tsx";
+import * as $dashboard_index from "./routes/dashboard/index.tsx";
+import * as $dashboard_stats from "./routes/dashboard/stats.tsx";
+import * as $dashboard_users from "./routes/dashboard/users.tsx";
+import * as $feed from "./routes/feed.ts";
+import * as $index from "./routes/index.tsx";
+import * as $pricing from "./routes/pricing.tsx";
+import * as $submit from "./routes/submit.tsx";
+import * as $users_login_ from "./routes/users/[login].tsx";
+import * as $welcome from "./routes/welcome.tsx";
+import * as $Chart from "./islands/Chart.tsx";
+import * as $ItemsList from "./islands/ItemsList.tsx";
+import * as $UsersTable from "./islands/UsersTable.tsx";
+import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/_404.tsx": $0,
-    "./routes/_500.tsx": $1,
-    "./routes/_app.tsx": $2,
-    "./routes/account/index.tsx": $3,
-    "./routes/account/manage.ts": $4,
-    "./routes/account/upgrade.ts": $5,
-    "./routes/api/items/[id].ts": $6,
-    "./routes/api/items/index.ts": $7,
-    "./routes/api/me/votes.ts": $8,
-    "./routes/api/stripe-webhooks.ts": $9,
-    "./routes/api/users/[login]/index.ts": $10,
-    "./routes/api/users/[login]/items.ts": $11,
-    "./routes/api/users/index.ts": $12,
-    "./routes/api/vote.ts": $13,
-    "./routes/blog/[slug].tsx": $14,
-    "./routes/blog/index.tsx": $15,
-    "./routes/dashboard/index.tsx": $16,
-    "./routes/dashboard/stats.tsx": $17,
-    "./routes/dashboard/users.tsx": $18,
-    "./routes/feed.ts": $19,
-    "./routes/index.tsx": $20,
-    "./routes/pricing.tsx": $21,
-    "./routes/submit.tsx": $22,
-    "./routes/users/[login].tsx": $23,
-    "./routes/welcome.tsx": $24,
+    "./routes/_404.tsx": $_404,
+    "./routes/_500.tsx": $_500,
+    "./routes/_app.tsx": $_app,
+    "./routes/account/index.tsx": $account_index,
+    "./routes/account/manage.ts": $account_manage,
+    "./routes/account/upgrade.ts": $account_upgrade,
+    "./routes/api/items/[id].ts": $api_items_id_,
+    "./routes/api/items/index.ts": $api_items_index,
+    "./routes/api/me/votes.ts": $api_me_votes,
+    "./routes/api/stripe-webhooks.ts": $api_stripe_webhooks,
+    "./routes/api/users/[login]/index.ts": $api_users_login_index,
+    "./routes/api/users/[login]/items.ts": $api_users_login_items,
+    "./routes/api/users/index.ts": $api_users_index,
+    "./routes/api/vote.ts": $api_vote,
+    "./routes/blog/[slug].tsx": $blog_slug_,
+    "./routes/blog/index.tsx": $blog_index,
+    "./routes/dashboard/index.tsx": $dashboard_index,
+    "./routes/dashboard/stats.tsx": $dashboard_stats,
+    "./routes/dashboard/users.tsx": $dashboard_users,
+    "./routes/feed.ts": $feed,
+    "./routes/index.tsx": $index,
+    "./routes/pricing.tsx": $pricing,
+    "./routes/submit.tsx": $submit,
+    "./routes/users/[login].tsx": $users_login_,
+    "./routes/welcome.tsx": $welcome,
   },
   islands: {
-    "./islands/Chart.tsx": $$0,
-    "./islands/ItemsList.tsx": $$1,
-    "./islands/UsersTable.tsx": $$2,
+    "./islands/Chart.tsx": $Chart,
+    "./islands/ItemsList.tsx": $ItemsList,
+    "./islands/UsersTable.tsx": $UsersTable,
   },
   baseUrl: import.meta.url,
-};
+} satisfies Manifest;
 
 export default manifest;
diff --git a/islands/ItemsList.tsx b/islands/ItemsList.tsx
index f729a0310..5f6f1274e 100644
--- a/islands/ItemsList.tsx
+++ b/islands/ItemsList.tsx
@@ -2,7 +2,6 @@
 import { Signal, useComputed, useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { type Item } from "@/utils/db.ts";
-import { LINK_STYLES } from "@/utils/constants.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 import { fetchValues } from "@/utils/http.ts";
 import { decodeTime } from "std/ulid/mod.ts";
@@ -91,7 +90,7 @@ function ItemSummary(props: ItemSummaryProps) {
       <div class="space-y-1">
         <p>
           <a
-            class="visited:(text-[purple] dark:text-[lightpink]) hover:underline mr-4"
+            class="visited:text-[purple] visited:dark:text-[lightpink] hover:underline mr-4"
             href={props.item.url}
           >
             {props.item.title}
@@ -167,7 +166,7 @@ export default function ItemsList(props: ItemsListProps) {
   }, []);
 
   if (isLoadingSig.value === undefined) {
-    return <p class={LINK_STYLES}>Loading...</p>;
+    return <p class="link-styles">Loading...</p>;
   }
 
   return (
@@ -185,7 +184,7 @@ export default function ItemsList(props: ItemsListProps) {
         })
         : <EmptyItemsList />}
       {cursorSig.value !== "" && (
-        <button onClick={loadMoreItems} class={LINK_STYLES}>
+        <button onClick={loadMoreItems} class="link-styles">
           {isLoadingSig.value ? "Loading..." : "Load more"}
         </button>
       )}
diff --git a/islands/UsersTable.tsx b/islands/UsersTable.tsx
index 0705711ff..1ce7ad7a2 100644
--- a/islands/UsersTable.tsx
+++ b/islands/UsersTable.tsx
@@ -3,7 +3,6 @@ import { useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import type { User } from "@/utils/db.ts";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
-import { LINK_STYLES } from "@/utils/constants.ts";
 import { fetchValues } from "@/utils/http.ts";
 import { PremiumBadge } from "@/components/PremiumBadge.tsx";
 
@@ -12,7 +11,7 @@ const TD_STYLES = "p-4";
 
 function UserTableRow(props: User) {
   return (
-    <tr class="hover:(bg-gray-50 dark:bg-gray-900) border-b border-gray-200">
+    <tr class="hover:bg-gray-50 hover:dark:bg-gray-900 border-b border-gray-200">
       <td scope="col" class={TD_STYLES}>
         <GitHubAvatarImg login={props.login} size={32} />
         <a
@@ -86,7 +85,7 @@ export default function UsersTable(props: UsersTableProps) {
       {cursorSig.value !== "" && (
         <button
           onClick={loadMoreUsers}
-          class={LINK_STYLES + " p-4"}
+          class="link-styles p-4"
         >
           {isLoadingSig.value ? "Loading..." : "Load more"}
         </button>
diff --git a/plugins/error_handling.ts b/plugins/error_handling.ts
index 03b3d0765..ffeaebce9 100644
--- a/plugins/error_handling.ts
+++ b/plugins/error_handling.ts
@@ -1,9 +1,8 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Plugin } from "$fresh/server.ts";
 import type { State } from "@/plugins/session.ts";
-import { Status } from "$fresh/server.ts";
 import { BadRequestError, redirect, UnauthorizedError } from "@/utils/http.ts";
-import { STATUS_TEXT } from "std/http/status.ts";
+import { STATUS_CODE, STATUS_TEXT } from "std/http/status.ts";
 
 /**
  * Returns the HTTP status code corresponding to a given runtime error. By
@@ -17,10 +16,10 @@ import { STATUS_TEXT } from "std/http/status.ts";
  * ```
  */
 export function toErrorStatus(error: Error) {
-  if (error instanceof Deno.errors.NotFound) return Status.NotFound;
-  if (error instanceof UnauthorizedError) return Status.Unauthorized;
-  if (error instanceof BadRequestError) return Status.BadRequest;
-  return Status.InternalServerError;
+  if (error instanceof Deno.errors.NotFound) return STATUS_CODE.NotFound;
+  if (error instanceof UnauthorizedError) return STATUS_CODE.Unauthorized;
+  if (error instanceof BadRequestError) return STATUS_CODE.BadRequest;
+  return STATUS_CODE.InternalServerError;
 }
 
 export default {
diff --git a/plugins/session.ts b/plugins/session.ts
index e68ab2047..fc084c550 100644
--- a/plugins/session.ts
+++ b/plugins/session.ts
@@ -1,6 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { Plugin } from "$fresh/server.ts";
-import type { MiddlewareHandlerContext } from "$fresh/server.ts";
+import type { FreshContext } from "$fresh/server.ts";
 import { getSessionId } from "kv_oauth/mod.ts";
 import { getUserBySession } from "@/utils/db.ts";
 import type { User } from "@/utils/db.ts";
@@ -22,7 +22,7 @@ export function assertSignedIn(
 
 async function setSessionState(
   req: Request,
-  ctx: MiddlewareHandlerContext<State>,
+  ctx: FreshContext<State>,
 ) {
   if (ctx.destination !== "route") return await ctx.next();
 
@@ -41,7 +41,7 @@ async function setSessionState(
 
 async function ensureSignedIn(
   _req: Request,
-  ctx: MiddlewareHandlerContext<State>,
+  ctx: FreshContext<State>,
 ) {
   assertSignedIn(ctx);
   return await ctx.next();
diff --git a/routes/_404.tsx b/routes/_404.tsx
index 1c5abf163..753d18cfa 100644
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -1,12 +1,11 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { HEADING_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 
 export default function NotFoundPage() {
   return (
     <main class="flex-1 p-4 flex flex-col justify-center text-center">
-      <h1 class={HEADING_STYLES}>Page not found</h1>
+      <h1 class="heading-styles">Page not found</h1>
       <p>
-        <a href="/" class={LINK_STYLES}>Return home &#8250;</a>
+        <a href="/" class="link-styles">Return home &#8250;</a>
       </p>
     </main>
   );
diff --git a/routes/_500.tsx b/routes/_500.tsx
index e246d2112..a251705cd 100644
--- a/routes/_500.tsx
+++ b/routes/_500.tsx
@@ -1,14 +1,13 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { ErrorPageProps } from "$fresh/server.ts";
-import { HEADING_STYLES, LINK_STYLES } from "@/utils/constants.ts";
+import { PageProps } from "$fresh/server.ts";
 
-export default function Error500Page(props: ErrorPageProps) {
+export default function Error500Page(props: PageProps) {
   return (
     <main class="flex flex-1 flex-col justify-center p-4 text-center space-y-4">
-      <h1 class={HEADING_STYLES}>Server error</h1>
+      <h1 class="heading-styles">Server error</h1>
       <p>500 internal error: {(props.error as Error).message}</p>
       <p>
-        <a href="/" class={LINK_STYLES}>Return home &#8250;</a>
+        <a href="/" class="link-styles">Return home &#8250;</a>
       </p>
     </main>
   );
diff --git a/routes/_app.tsx b/routes/_app.tsx
index be9fce649..f8ce95575 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -6,15 +6,24 @@ import { defineApp } from "$fresh/server.ts";
 
 export default defineApp<State>((_, ctx) => {
   return (
-    <div class="dark:bg-gray-900">
-      <div class="flex flex-col min-h-screen mx-auto max-w-7xl w-full dark:text-white">
-        <Header
-          url={ctx.url}
-          sessionUser={ctx.state?.sessionUser}
-        />
-        <ctx.Component />
-        <Footer url={ctx.url} />
-      </div>
-    </div>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body>
+        <div class="dark:bg-gray-900">
+          <div class="flex flex-col min-h-screen mx-auto max-w-7xl w-full dark:text-white">
+            <Header
+              url={ctx.url}
+              sessionUser={ctx.state?.sessionUser}
+            />
+            <ctx.Component />
+            <Footer url={ctx.url} />
+          </div>
+        </div>
+      </body>
+    </html>
   );
 });
diff --git a/routes/account/index.tsx b/routes/account/index.tsx
index ab6668413..dcdba6f8c 100644
--- a/routes/account/index.tsx
+++ b/routes/account/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { defineRoute } from "$fresh/server.ts";
 import type { SignedInState } from "@/plugins/session.ts";
-import { BUTTON_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import Head from "@/components/Head.tsx";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
@@ -27,7 +26,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
               <span>
                 {sessionUser.login}
               </span>
-              <a href={`/users/${sessionUser.login}`} class={LINK_STYLES}>
+              <a href={`/users/${sessionUser.login}`} class="link-styles">
                 Go to my profile &#8250;
               </a>
             </p>
@@ -47,7 +46,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
               {isStripeEnabled() && (
                 <span>
                   <a
-                    class={LINK_STYLES}
+                    class="link-styles"
                     href={`/account/${action.toLowerCase()}`}
                   >
                     {action} &#8250;
@@ -59,7 +58,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
         </ul>
         <a
           href="/signout?success_url=/"
-          class={`${BUTTON_STYLES} block text-center`}
+          class="button-styles block text-center"
         >
           Sign out
         </a>
diff --git a/routes/api/stripe-webhooks.ts b/routes/api/stripe-webhooks.ts
index 6e7d70188..9c3aae6be 100644
--- a/routes/api/stripe-webhooks.ts
+++ b/routes/api/stripe-webhooks.ts
@@ -1,5 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { type Handlers, Status } from "$fresh/server.ts";
+import { type Handlers } from "$fresh/server.ts";
+import { STATUS_CODE } from "std/http/status.ts";
 import { isStripeEnabled, stripe } from "@/utils/stripe.ts";
 import Stripe from "stripe";
 import { getUserByStripeCustomer, updateUser } from "@/utils/db.ts";
@@ -54,7 +55,7 @@ export const handler: Handlers = {
         }
 
         await updateUser({ ...user, isSubscribed: true });
-        return new Response(null, { status: Status.Created });
+        return new Response(null, { status: STATUS_CODE.Created });
       }
       case "customer.subscription.deleted": {
         const user = await getUserByStripeCustomer(customer);
@@ -63,7 +64,7 @@ export const handler: Handlers = {
         }
 
         await updateUser({ ...user, isSubscribed: false });
-        return new Response(null, { status: Status.Accepted });
+        return new Response(null, { status: STATUS_CODE.Accepted });
       }
       default: {
         throw new BadRequestError("Event type not supported");
diff --git a/routes/api/vote.ts b/routes/api/vote.ts
index 8b19bf6af..843e9aa0f 100644
--- a/routes/api/vote.ts
+++ b/routes/api/vote.ts
@@ -1,5 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { type Handlers, Status } from "$fresh/server.ts";
+import { type Handlers } from "$fresh/server.ts";
+import { STATUS_CODE } from "std/http/status.ts";
 import type { SignedInState } from "@/plugins/session.ts";
 import { createVote } from "@/utils/db.ts";
 import { BadRequestError } from "@/utils/http.ts";
@@ -16,6 +17,6 @@ export const handler: Handlers<undefined, SignedInState> = {
       userLogin: ctx.state.sessionUser.login,
     });
 
-    return new Response(null, { status: Status.Created });
+    return new Response(null, { status: STATUS_CODE.Created });
   },
 };
diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx
index 45bda8e56..68d00abab 100644
--- a/routes/blog/index.tsx
+++ b/routes/blog/index.tsx
@@ -2,7 +2,6 @@
 import { defineRoute } from "$fresh/server.ts";
 import { getPosts, type Post } from "@/utils/posts.ts";
 import Head from "@/components/Head.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 
 function PostCard(props: Post) {
   return (
@@ -36,7 +35,7 @@ export default defineRoute(async (_req, ctx) => {
     <>
       <Head title="Blog" href={ctx.url.href} />
       <main class="p-4 flex-1">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Blog</h1>
+        <h1 class="heading-with-margin-styles">Blog</h1>
         <div class="divide-y">
           {posts.map((post) => <PostCard {...post} />)}
         </div>
diff --git a/routes/dashboard/stats.tsx b/routes/dashboard/stats.tsx
index 4c9bce6f1..d6d7e7f71 100644
--- a/routes/dashboard/stats.tsx
+++ b/routes/dashboard/stats.tsx
@@ -2,7 +2,6 @@
 import Chart from "@/islands/Chart.tsx";
 import Head from "@/components/Head.tsx";
 import TabsBar from "@/components/TabsBar.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import { defineRoute } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
 
@@ -47,7 +46,7 @@ export default defineRoute((_req, ctx) => {
     <>
       <Head title="Dashboard" href={ctx.url.href} />
       <main class="flex-1 p-4 flex flex-col f-client-nav">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
+        <h1 class="heading-with-margin-styles">Dashboard</h1>
         <TabsBar
           links={[{
             path: "/dashboard/stats",
diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx
index 9e321514b..aa5ca9a21 100644
--- a/routes/dashboard/users.tsx
+++ b/routes/dashboard/users.tsx
@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import Head from "@/components/Head.tsx";
 import TabsBar from "@/components/TabsBar.tsx";
-import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import UsersTable from "@/islands/UsersTable.tsx";
 import { defineRoute } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
@@ -20,7 +19,7 @@ export default defineRoute((_req, ctx) => {
         />
       </Head>
       <main class="flex-1 p-4 f-client-nav">
-        <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
+        <h1 class="heading-with-margin-styles">Dashboard</h1>
         <TabsBar
           links={[{
             path: "/dashboard/stats",
diff --git a/routes/pricing.tsx b/routes/pricing.tsx
index e2d4a31e5..d7371e93e 100644
--- a/routes/pricing.tsx
+++ b/routes/pricing.tsx
@@ -1,6 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { State } from "@/plugins/session.ts";
-import { BUTTON_STYLES } from "@/utils/constants.ts";
 import { assertIsPrice, isStripeEnabled, stripe } from "@/utils/stripe.ts";
 import { formatCurrency } from "@/utils/display.ts";
 import Stripe from "stripe";
@@ -10,7 +9,7 @@ import { defineRoute } from "$fresh/server.ts";
 import { PremiumBadge } from "@/components/PremiumBadge.tsx";
 
 const CARD_STYLES =
-  "shadow-md flex flex-col flex-1 space-y-8 p-8 ring-1 ring-gray-300 rounded-xl dark:bg-gray-700 bg-gradient-to-r";
+  "shadow-md flex flex-col flex-1 space-y-8 p-8 ring-1 ring-gray-300 ring-opacity-50 rounded-xl dark:bg-gray-700 bg-gradient-to-r";
 const CHECK_STYLES = "w-6 h-6 text-primary shrink-0 inline-block mr-2";
 
 function FreePlanCard() {
@@ -45,7 +44,7 @@ function FreePlanCard() {
       <div class="text-center">
         <a
           href="/account/manage"
-          class={`${BUTTON_STYLES} w-full rounded-md block`}
+          class="button-styles w-full rounded-md block"
         >
           Manage
         </a>
@@ -99,7 +98,7 @@ function PremiumPlanCard(props: PremiumCardPlanProps) {
         {props.isSubscribed
           ? (
             <a
-              class={`${BUTTON_STYLES} w-full rounded-md block`}
+              class="button-styles w-full rounded-md block"
               href="/account/manage"
             >
               Manage
@@ -107,7 +106,7 @@ function PremiumPlanCard(props: PremiumCardPlanProps) {
           )
           : (
             <a
-              class={`${BUTTON_STYLES} w-full rounded-md block`}
+              class="button-styles w-full rounded-md block"
               href="/account/upgrade"
             >
               Upgrade
@@ -152,7 +151,7 @@ function EnterprisePricingCard() {
       <div class="text-center">
         <a
           href="mailto:andy@deno.com"
-          class={`${BUTTON_STYLES} w-full rounded-md block`}
+          class="button-styles w-full rounded-md block"
         >
           Contact us
         </a>
@@ -180,7 +179,7 @@ export default defineRoute<State>(async (_req, ctx) => {
       <Head title="Pricing" href={ctx.url.href} />
       <main class="mx-auto max-w-5xl w-full flex-1 flex flex-col justify-center px-4">
         <div class="mb-8 text-center">
-          <h1 class="text-3xl font-bold">Pricing</h1>
+          <h1 class="heading-styles">Pricing</h1>
           <p class="text-gray-500">Choose the plan that suites you</p>
         </div>
         <div class="flex flex-col md:flex-row gap-4">
diff --git a/routes/submit.tsx b/routes/submit.tsx
index fa6d5aa2c..f018c21d1 100644
--- a/routes/submit.tsx
+++ b/routes/submit.tsx
@@ -1,5 +1,4 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { HEADING_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 import Head from "@/components/Head.tsx";
 import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx";
 import IconCircleX from "tabler_icons_tsx/circle-x.tsx";
@@ -15,7 +14,7 @@ import { ulid } from "std/ulid/mod.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 
 const SUBMIT_STYLES =
-  "w-full text-white text-center rounded-[7px] transition duration-300 px-4 py-2 block hover:(bg-white text-black dark:(bg-gray-900 !text-white))";
+  "w-full text-white text-center rounded-[7px] transition duration-300 px-4 py-2 block hover:bg-white hover:text-black hover:dark:bg-gray-900 hover:dark:!text-white";
 
 export const handler: Handlers<undefined, SignedInState> = {
   async POST(req, ctx) {
@@ -49,7 +48,7 @@ export default defineRoute<State>((_req, ctx) => {
       <Head title="Submit" href={ctx.url.href} />
       <main class="flex-1 flex flex-col justify-center mx-auto w-full space-y-16 p-4 max-w-6xl">
         <div class="text-center">
-          <h1 class={HEADING_STYLES}>
+          <h1 class="heading-styles">
             Share your project
           </h1>
           <p class="text-gray-500">
@@ -91,7 +90,7 @@ export default defineRoute<State>((_req, ctx) => {
               </label>
               <input
                 id="submit_title"
-                class={`${INPUT_STYLES} w-full mt-2`}
+                class="input-styles w-full mt-2"
                 type="text"
                 name="title"
                 required
@@ -108,7 +107,7 @@ export default defineRoute<State>((_req, ctx) => {
                 URL
               </label>
               <input
-                class={`${INPUT_STYLES} w-full mt-2`}
+                class="input-styles w-full mt-2"
                 type="url"
                 name="url"
                 required
diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx
index b7d9d1b0d..05f515c2f 100644
--- a/routes/users/[login].tsx
+++ b/routes/users/[login].tsx
@@ -2,7 +2,6 @@
 import type { State } from "@/plugins/session.ts";
 import { getUser } from "@/utils/db.ts";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
-import { LINK_STYLES } from "@/utils/constants.ts";
 import Head from "@/components/Head.tsx";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
 import ItemsList from "@/islands/ItemsList.tsx";
@@ -26,7 +25,7 @@ function UserProfile(props: UserProfileProps) {
         <a
           href={`https://github.com/${props.login}`}
           aria-label={`${props.login}'s GitHub profile`}
-          class={LINK_STYLES}
+          class="link-styles"
           target="_blank"
         >
           <IconBrandGithub class="w-6" />
diff --git a/routes/welcome.tsx b/routes/welcome.tsx
index 900c2df11..9e57d4dad 100644
--- a/routes/welcome.tsx
+++ b/routes/welcome.tsx
@@ -5,7 +5,7 @@ import { isGitHubSetup } from "@/utils/github.ts";
 
 function SetupInstruction() {
   return (
-    <div class="bg-green-50 dark:(bg-gray-900 border border-green-800) rounded-xl max-w-screen-sm mx-auto p-8 space-y-2">
+    <div class="bg-green-50 dark:bg-gray-900 dark:border dark:border-green-800 rounded-xl max-w-screen-sm mx-auto p-8 space-y-2">
       <h1 class="text-2xl font-medium">Welcome to SaaSKit!</h1>
 
       <p class="text-gray-600 dark:text-gray-400">
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 000000000..4704e327a
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.button-styles {
+  @apply px-4 py-2 bg-primary text-white rounded-lg border border-primary transition duration-100 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-transparent hover:text-primary;
+}
+
+.input-styles {
+  @apply px-4 py-2 bg-transparent rounded-lg outline-none border border-gray-300 hover:border-black transition duration-100 disabled:opacity-50 disabled:cursor-not-allowed hover:dark:border-white;
+}
+
+.site-bar-styles {
+  @apply flex justify-between p-4 gap-4;
+}
+
+.nav-styles {
+  @apply flex flex-wrap justify-start gap-x-8 gap-y-4 items-center justify-between h-full;
+}
+
+.nav-item {
+  @apply text-gray-500 px-3 py-4 sm:py-2;
+}
+
+.link-styles {
+  @apply text-gray-500 transition duration-100 hover:text-black hover:dark:text-white;
+}
+
+/* .active-link-styles {
+  @apply data-[current]:!text-black data-[current]:dark:!text-white;
+}
+
+.active-ancestor-link-styles {
+  @apply data-[ancestor]:!text-black data-[ancestor]:dark:!text-white;
+} */
+
+.heading-styles {
+  @apply text-3xl font-bold;
+}
+
+.heading-with-margin-styles {
+  @apply text-3xl font-bold mb-8;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 000000000..d41c00436
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,20 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#be185d",
+        secondary: "#4338ca",
+      },
+      borderWidth: {
+        "1": "1px",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/twind.config.ts b/twind.config.ts
deleted file mode 100644
index 85435f9c0..000000000
--- a/twind.config.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { Options } from "$fresh/plugins/twindv1.ts";
-import { defineConfig, Preset } from "@twind/core";
-// twind preset
-import presetTailWind from "twind-preset-tailwind/base";
-import * as colors from "twind-preset-tailwind/colors";
-import ext from "twind-preset-ext";
-
-/** @todo Remove the need for type-assertions */
-export default {
-  selfURL: import.meta.url,
-  // <BaseTheme, Preset<any>[]>
-  ...defineConfig({
-    presets: [
-      /**
-       * Note: `presetAutoprefix()` was removed as it seemed to make no visual or functional difference to the website.
-       * If styling issues re-occur in the future, try adding `presetAutoprefix()` back here.
-       * @see {@link https://github.com/denoland/saaskit/pull/282}
-       */
-      presetTailWind({
-        colors: {
-          // This line is required. Otherwise, if removed, the values of other colors with be removed.
-          ...colors,
-          // Modify primary and secondary colors according to your color-scheme
-          primary: "#be185d",
-          secondary: "#4338ca",
-        },
-        // deno-lint-ignore no-explicit-any
-      }) as Preset<any>,
-      ext() as Preset,
-    ],
-  }),
-} as Options;
diff --git a/utils/constants.ts b/utils/constants.ts
index 5f9c9d66f..6b356b7f0 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -1,24 +1,3 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 export const SITE_NAME = "Deno Hunt (Beta)";
 export const SITE_DESCRIPTION = "Discover new Deno projects. Share your own.";
-
-/**
- * These are base styles for some elements. This approach is chosen as it avoids more complex alternatives:
- * 1. Writing custom classes in Tailwind CSS (see https://tailwindcss.com/docs/reusing-styles#compared-to-css-abstractions)
- * 2. Writing custom components which offer no additional functionality beyond styling
- */
-export const BUTTON_STYLES =
-  "px-4 py-2 bg-primary text-white rounded-lg border-1 border-primary transition duration-100 disabled:(opacity-50 cursor-not-allowed) hover:(bg-transparent text-primary)";
-export const INPUT_STYLES =
-  "px-4 py-2 bg-transparent rounded rounded-lg outline-none border-1 border-gray-300 hover:border-black transition duration-100 disabled:(opacity-50 cursor-not-allowed) dark:(hover:border-white)";
-export const SITE_BAR_STYLES = "flex justify-between p-4 gap-4";
-export const NAV_STYLES =
-  "flex flex-wrap justify-start gap-x-8 gap-y-4 items-center justify-between h-full";
-export const LINK_STYLES =
-  "text-gray-500 transition duration-100 hover:(text-black dark:text-white)";
-export const ACTIVE_LINK_STYLES =
-  "[data-current]:!text-black [data-current]:!dark:text-white";
-export const ACTIVE_ANCESTOR_LINK_STYLES =
-  "[data-ancestor]:!text-black [data-ancestor]:!dark:text-white";
-export const HEADING_STYLES = "text-3xl font-bold";
-export const HEADING_WITH_MARGIN_STYLES = HEADING_STYLES + " mb-8";
diff --git a/utils/github_test.ts b/utils/github_test.ts
index 5488c754b..e2356b943 100644
--- a/utils/github_test.ts
+++ b/utils/github_test.ts
@@ -3,7 +3,7 @@ import { assertRejects } from "std/assert/assert_rejects.ts";
 import { getGitHubUser } from "./github.ts";
 import { returnsNext, stub } from "std/testing/mock.ts";
 import { assertEquals } from "std/assert/assert_equals.ts";
-import { Status } from "kv_oauth/deps.ts";
+import { STATUS_CODE } from "std/http/status.ts";
 import { BadRequestError } from "@/utils/http.ts";
 
 Deno.test("[plugins] getGitHubUser()", async (test) => {
@@ -14,7 +14,7 @@ Deno.test("[plugins] getGitHubUser()", async (test) => {
       "fetch",
       returnsNext([
         Promise.resolve(
-          Response.json({ message }, { status: Status.BadRequest }),
+          Response.json({ message }, { status: STATUS_CODE.BadRequest }),
         ),
       ]),
     );
diff --git a/utils/http.ts b/utils/http.ts
index 44f978df3..127e8d4fc 100644
--- a/utils/http.ts
+++ b/utils/http.ts
@@ -1,5 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { RedirectStatus, Status } from "std/http/status.ts";
+import { RedirectStatus, STATUS_CODE } from "std/http/status.ts";
 
 /**
  * Returns a response that redirects the client to the given location (URL).
@@ -19,7 +19,7 @@ import { RedirectStatus, Status } from "std/http/status.ts";
  */
 export function redirect(
   location: string,
-  status: Status.Created | RedirectStatus = Status.SeeOther,
+  status: typeof STATUS_CODE.Created | RedirectStatus = STATUS_CODE.SeeOther,
 ) {
   return new Response(null, {
     headers: {
diff --git a/utils/http_test.ts b/utils/http_test.ts
index f9b72e2b2..fef9ddcb8 100644
--- a/utils/http_test.ts
+++ b/utils/http_test.ts
@@ -2,7 +2,7 @@
 import { returnsNext, stub } from "std/testing/mock.ts";
 import { fetchValues, getCursor, redirect } from "./http.ts";
 import { assert, assertEquals, assertRejects } from "std/assert/mod.ts";
-import { Status } from "$fresh/server.ts";
+import { STATUS_CODE } from "std/http/status.ts";
 import { Item, randomItem } from "@/utils/db.ts";
 
 Deno.test("[http] redirect() defaults", () => {
@@ -33,7 +33,7 @@ Deno.test("[http] getCursor()", () => {
 
 Deno.test("[http] fetchValues()", async () => {
   const resp1 = Promise.resolve(
-    new Response(null, { status: Status.NotFound }),
+    new Response(null, { status: STATUS_CODE.NotFound }),
   );
   const resp2Body = {
     values: [randomItem(), randomItem()],