diff --git a/.gitignore b/.gitignore
index e6f46bb..f1c3c03 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@
 
 data/
 _fresh/
+node_modules/
diff --git a/components/PageHero.tsx b/components/PageHero.tsx
index 5304da0..b806944 100644
--- a/components/PageHero.tsx
+++ b/components/PageHero.tsx
@@ -21,9 +21,9 @@ function Wrapper(
 ) {
   return (
     <div
-      class={`flex justify-between flex-col relative w-full min-h-[${
-        image ? 400 : 200
-      }px] rounded-3xl overflow-hidden`}
+      class={`flex justify-between flex-col relative w-full ${
+        image ? "min-h-[400px]" : "min-h-[200px]"
+      } rounded-3xl overflow-hidden`}
     >
       <HeroContext.Provider value={{ image }}>
         {image &&
diff --git a/deno.json b/deno.json
index 262a04b..66e50b1 100644
--- a/deno.json
+++ b/deno.json
@@ -1,5 +1,6 @@
 {
   "lock": false,
+  "nodeModulesDir": true,
   "tasks": {
     "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
     "start": "deno run -A --watch=static/,routes/ dev.ts",
@@ -7,7 +8,14 @@
     "preview": "deno run -A main.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update ."
   },
-  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
   "imports": {
     "typesense": "https://raw.githubusercontent.com/bradenmacdonald/typesense-deno/main/mod.ts",
     "yaml": "https://deno.land/std@0.197.0/yaml/mod.ts",
@@ -24,10 +32,16 @@
     "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": "https://esm.sh/twind@0.16.19",
-    "twind/": "https://esm.sh/twind@0.16.19/",
-    "$std/": "https://deno.land/std@0.193.0/"
+    "$std/": "https://deno.land/std@0.193.0/",
+    "tailwindcss": "npm:tailwindcss@3.3.5",
+    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
   },
-  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
-  "exclude": ["**/_fresh/*"]
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ]
 }
diff --git a/fresh.config.ts b/fresh.config.ts
index fd48d1b..3204a95 100644
--- a/fresh.config.ts
+++ b/fresh.config.ts
@@ -1,6 +1,5 @@
 import { defineConfig } from "$fresh/server.ts";
-import twindPlugin from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 export default defineConfig({
-  plugins: [twindPlugin(twindConfig)],
+  plugins: [tailwind()],
 });
diff --git a/islands/KMenu.tsx b/islands/KMenu.tsx
index b84863f..48a88bb 100644
--- a/islands/KMenu.tsx
+++ b/islands/KMenu.tsx
@@ -154,7 +154,7 @@ export const KMenu = (
 
   return (
     <div
-      class={`opacity-${visible.value ? 100 : 0} pointer-events-${
+      class={`${visible.value ? "opacity-100" : "opacity-0"} pointer-events-${
         visible.value ? "auto" : "none"
       } transition grid place-items-center w-full h-full fixed top-0 left-0 z-50`}
       style={{ background: "#141217ee" }}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index c980732..2bad5a0 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -27,6 +27,7 @@ export default function App({ Component }: AppProps) {
         />
         <link rel="manifest" href="/site.webmanifest" />
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+        <link rel="stylesheet" href="/styles.css" />
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#141218" />
         <script src="/thumbnails.js" type="module"></script>
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
index 6f49c43..b60ee99 100644
--- a/routes/_layout.tsx
+++ b/routes/_layout.tsx
@@ -20,7 +20,7 @@ export default function MyLayout({ Component }: PageProps) {
             return (
               <a
                 href={m.link}
-                class={`flex items-center gap-2  text-white [data-current]:bg-white [data-current]:text-black p-3 text-xl w-full rounded-2xl`}
+                class={`flex items-center gap-2  text-white data-[current]:bg-white data-[current]:text-black p-3 text-xl w-full rounded-2xl`}
               >
                 {<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
               </a>
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..99dba8f
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,7 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+} satisfies Config;
diff --git a/twind.config.ts b/twind.config.ts
deleted file mode 100644
index 2a7ac27..0000000
--- a/twind.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Options } from "$fresh/plugins/twind.ts";
-
-export default {
-  selfURL: import.meta.url,
-} as Options;