Migrate to TailwindCSS (#21)

* Migrate to TailwindCSS

twind is no longer supported so might as well move everything to something more sane

* feat: Fix duplicate dependencies and add compilerOptions

* style: Remove 'build.target' property from fresh.config.ts

* feat: Added root directory configuration

* feat: Update extension, update start and build scripts, update lint rules, update compiler options, update shebang, add dotenv load, add dotenv load, update stylesheet reference and add tailwind.json configuration file

.github/workflows/deploy.yml

@@ -31,3 +31,4 @@ jobs:
         with:
           project: "herta" 
           entrypoint: "./main.ts"
+          root: "."

.gitignore

@@ -7,3 +7,6 @@
 
 # Fresh build directory
 _fresh/
+
+# Tailwind requires node_modules so we need to exclude it
+node_modules/

.vscode/extensions.json

@@ -1,6 +1,6 @@
 {
   "recommendations": [
     "denoland.vscode-deno",
-    "sastan.twind-intellisense"
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -13,5 +13,8 @@
   },
   "[javascript]": {
     "editor.defaultFormatter": "denoland.vscode-deno"
-  }
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

deno.json

@@ -1,13 +1,26 @@
 {
   "lock": false,
+  "nodeModulesDir": true,
   "tasks": {
     "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
-    "start": "deno run -A --unstable-broadcast-channel --unstable-kv --watch=static/,home_content/,routes/ dev.ts",
-    "build": "deno run -A --unstable-broadcast-channel --unstable-kv dev.ts build",
-    "preview": "deno run -A --unstable-broadcast-channel --unstable-kv main.ts",
-    "update": "deno run -A --unstable-broadcast-channel --unstable-kv -r https://fresh.deno.dev/update ."
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --unstable-kv --unstable-broadcast-channel --watch=static/,routes/ dev.ts",
+    "build": "deno run -A --unstable-kv --unstable-broadcast-channel  dev.ts build",
+    "preview": "deno run -A --unstable-kv --unstable-broadcast-channel main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
   },
-  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
   "lib": { "deno.unstable": true },
   "imports": {
     "$fresh/": "https://deno.land/x/fresh@1.6.3/",
@@ -16,14 +29,12 @@
     "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/core@1.1.3",
-    "twind/": "https://esm.sh/@twind/core@1.1.3/",
-    "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
-    "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7",
     "$std/": "https://deno.land/std@0.193.0/",
     "$gfm": "https://deno.land/x/gfm@0.2.3/mod.ts",
-    "partytown": "https://esm.sh/@builder.io/partytown@0.8.1/react"
+    "partytown": "https://esm.sh/@builder.io/partytown@0.8.1/react",
+    "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" }
 }

dev.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env -S deno run -A --watch=static/,routes/
+#!/usr/bin/env -S deno run -A --unstable-broadcast-channel --unstable-kv --watch=static/,routes/
 
 import dev from "$fresh/dev.ts";
 import config from "./fresh.config.ts";

fresh.config.ts

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

main.ts

@@ -4,11 +4,10 @@
 /// <reference lib="dom.asynciterable" />
 /// <reference lib="deno.ns" />
 
-import { Manifest, start } from "$fresh/server.ts";
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
 
-import twindPlugin from "$fresh/plugins/twindv1.ts";
-import twindConfig from "./twind.config.ts";
-import { freshSEOPlugin } from "https://deno.land/x/fresh_seo@1.0.1/mod.ts";
-
-await start(manifest as unknown as Manifest, { plugins: [twindPlugin(twindConfig), freshSEOPlugin(manifest)] });
+await start(manifest, config);

routes/_app.tsx

@@ -8,6 +8,7 @@ export default function App({ Component }: AppProps) {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
         <meta property="og:title" content="Kuru Kuru~" />
         <meta property="og:site_name" content="Kuru Kuru~" />
         <meta property="og:url" content="https://herta.deno.dev" />

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,10 +0,0 @@
-import { defineConfig, Preset } from "twind";
-import presetTailwind from "@twind/preset-tailwind";
-import presetAutoprefix from "@twind/preset-autoprefix";
-
-export default {
-  ...defineConfig({
-    presets: [presetTailwind() as Preset, presetAutoprefix()],
-  }),
-  selfURL: import.meta.url,
-};