diff --git a/components/Footer.tsx b/components/Footer.tsx
index df8104398..81e0fa336 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 classnames from "npm:classnames@2.3.2";
+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={classnames(LINK_STYLES, ACTIVE_LINK_STYLES)}
+          class="link-styles active-link-styles"
         >
           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 b31b9e139..f5045c0d0 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 classnames from "npm:classnames@2.3.2";
 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={classnames(
-        SITE_BAR_STYLES,
-        "flex-col sm:flex-row",
-      )}
-    >
+    <header class="site-bar-styles flex-col sm:flex-row">
       <input
         type="checkbox"
         id="nav-toggle"
@@ -75,7 +62,7 @@ export default function Header(props: HeaderProps) {
       >
         <a
           href="/dashboard"
-          class={classnames(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={classnames(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:!dark:text-white nav-item"
             >
               Pricing
             </a>
@@ -92,13 +79,13 @@ export default function Header(props: HeaderProps) {
           ? (
             <a
               href="/account"
-              class={classnames(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={classnames(LINK_STYLES, NAV_ITEM)}>
+            <a href="/signin" class="link-styles nav-item">
               Sign in
             </a>
           )}
diff --git a/components/TabsBar.tsx b/components/TabsBar.tsx
index 2f6c4c3da..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 classnames from "npm:classnames@2.3.2";
 import { ComponentChildren } from "preact";
 
 export interface TabItemProps {
@@ -15,13 +13,11 @@ export function TabItem(props: TabItemProps) {
   return (
     <a
       href={props.path}
-      class={classnames(
-        "px-4 py-2 rounded-lg",
+      class={`px-4 py-2 rounded-lg ${
         props.active
           ? "bg-gray-100 text-black dark:bg-gray-800 dark:text-white"
-          : "",
-        LINK_STYLES,
-      )}
+          : ""
+      } link-styles`}
     >
       {props.children}
     </a>
diff --git a/islands/ItemsList.tsx b/islands/ItemsList.tsx
index 78973d208..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";
@@ -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 06a4957f9..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";
 
@@ -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/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 7c4e0792c..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 { PageProps } from "$fresh/server.ts";
-import { HEADING_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 
 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/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/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..e99ade130 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";
@@ -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 d0ef77422..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";
@@ -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/static/styles.css b/static/styles.css
index b5c61c956..7f996dc04 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,3 +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
index 53a55ba2c..e7a53aaec 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,12 +5,6 @@ export default {
   content: [
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],
-  safelist: [
-    "gap-x-8",
-    "hover:dark:text-white",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed",
-  ],
   theme: {
     extend: {
       colors: {
diff --git a/utils/constants.ts b/utils/constants.ts
index 9e304ec3a..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 disabled:cursor-not-allowed hover:bg-transparent hover: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 disabled:cursor-not-allowed hover:dark: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 hover: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";