feat: move to tailwindcss from twind

.gitignore

@@ -7,3 +7,4 @@
 
 data/
 _fresh/
+node_modules/

components/PageHero.tsx

@@ -21,9 +21,9 @@ function Wrapper(
 ) {
   return (
     <div
-      class={`flex justify-between flex-col relative w-full min-h-[${
+      class={`flex justify-between flex-col relative w-full ${
-        image ? 400 : 200
+        image ? "min-h-[400px]" : "min-h-[200px]"
-      }px] rounded-3xl overflow-hidden`}
+      } rounded-3xl overflow-hidden`}
     >
       <HeroContext.Provider value={{ image }}>
         {image &&

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",
+    "$std/": "https://deno.land/std@0.193.0/",
-    "twind/": "https://esm.sh/twind@0.16.19/",
+    "tailwindcss": "npm:tailwindcss@3.3.5",
-    "$std/": "https://deno.land/std@0.193.0/"
+    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
   },
-  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "compilerOptions": {
-  "exclude": ["**/_fresh/*"]
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ]
 }

fresh.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from "$fresh/server.ts";
-import twindPlugin from "$fresh/plugins/twind.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
-import twindConfig from "./twind.config.ts";
 export default defineConfig({
-  plugins: [twindPlugin(twindConfig)],
+  plugins: [tailwind()],
 });

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" }}

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>

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>

static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,7 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+} satisfies Config;

twind.config.ts

@@ -1,5 +0,0 @@
-import { Options } from "$fresh/plugins/twind.ts";
-
-export default {
-  selfURL: import.meta.url,
-} as Options;