Migrate to real tailwind

.gitignore

@@ -12,4 +12,5 @@ node_modules/
 
 secretshare*
 
-vendor/
+vendor/
+node_modules/

deno.json

@@ -19,6 +19,7 @@
   },
   "lint": { "rules": { "tags": ["fresh", "recommended"] } },
   "exclude": ["**/_fresh/*"],
+  "nodeModulesDir": "auto",
   "imports": {
     "@/": "./",
     "@bjesuiter/deno-tailwindcss-iso": "jsr:@bjesuiter/[email protected]",
@@ -29,7 +30,8 @@
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "tailwind-merge": "npm:tailwind-merge@^3.3.1"
+    "tailwind-merge": "npm:tailwind-merge@^3.3.1",
+    "tailwindcss": "npm:tailwindcss@^3.4.1"
   },
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
 }

fresh.config.ts

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

fresh.gen.ts

@@ -6,7 +6,6 @@ import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
 import * as $api_create from "./routes/api/create.ts";
-import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts";
 import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts";
 import * as $create from "./routes/create.tsx";
 import * as $index from "./routes/index.tsx";
@@ -25,7 +24,6 @@ const manifest = {
     "./routes/_app.tsx": $_app,
     "./routes/_layout.tsx": $_layout,
     "./routes/api/create.ts": $api_create,
-    "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
     "./routes/api/secret/[uuid].ts": $api_secret_uuid_,
     "./routes/create.tsx": $create,
     "./routes/index.tsx": $index,

islands/CreateSecret.tsx

@@ -1,7 +1,7 @@
 import onSubmit from "@/src/formHandler/create.ts";
-import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
+import CustomExpireInForm from "@/components/CreateSecret/CustomExpireInForm.tsx";
 import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
-import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx";
+import ViewCountLimitInput from "@/components/CreateSecret/ViewCountLimitInput.tsx";
 
 export default function CreateSecret() {
   return (
@@ -34,7 +34,7 @@ export default function CreateSecret() {
           <ViewCountLimitInput />
         </div>
 
-        <button class="p-2" type="submit">
+        <button class="p-2 rounded-lg bg-primary" type="submit">
           Anlegen
         </button>
       </form>

islands/FetchSecret.tsx

@@ -39,7 +39,7 @@ export default function FetchSecret(
         name="fetchSecretButton"
         type="submit"
         disabled={fetched.value}
-        class="p-2"
+        class={"p-2 rounded-lg" + (fetched.value ? " bg-slate-400 cursor-not-allowed" : " bg-primary")}
       >
         Abrufen
       </button>

islands/Log.tsx

@@ -24,7 +24,7 @@ function renderMessage(message: RichMessage | undefined) {
     case "secretFetch":
       return (
         <CardMsg header="Secret Data" extraInfo={message.extraInfo}>
-          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] w-full">
+          <pre class="monospace whitespace-pre-wrap break-words bg-gray-100 p-2 rounded-md overflow-auto w-full">
             {message.secret}
           </pre>
         </CardMsg>

main.ts

@@ -9,13 +9,5 @@ import "@std/dotenv/load";
 import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
 import config from "./fresh.config.ts";
-import { computeTailwindStyles } from "./src/utils/cssCache.ts";
-
-// custom things to do before starting the server
-try {
-  await computeTailwindStyles();
-} catch (e) {
-  console.error(`ON STARTUP: Error while computing tailwind styles: `, e);
-}
 
 await start(manifest, config);

routes/_app.tsx

@@ -7,7 +7,7 @@ export default function App({ Component }: PageProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>SecretShare</title>
         <link rel="stylesheet" href="/styles.css" />
-        <link rel="stylesheet" href="/api/res/tailwind.css" />
+        {/* <link rel="stylesheet" href="/api/res/tailwind.css" /> */}
       </head>
       <body class="min-w-[220px] mb-8">
         <Component />

static/styles.css

@@ -1,59 +1,3 @@
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-button, [role="button"] {
-  cursor: pointer;
-}
-
-button {
-  background-color: transparent;
-  padding: 0.5rem;
-  border: 1px solid black;
-  border-radius: 4px;
-  font-size: 1em;
-}
-
-textarea {
-  resize: both;
-}
-
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  font-size: 1em;
-}
-img,
-svg {
-  display: block;
-}
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-.transition-colors {
-  transition-property: background-color, border-color, color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,15 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx,js,jsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        "primary": "oklch(0.7751 0.127965 240.0314)",
+        "primary-dark": "oklch(0.5327 0.1152 242.02)",
+      },
+    },
+  },
+} satisfies Config;