wedman Comments - Answer Overflow

@marvinh. Im actually not sure that it works as intended. There is no errors in the console but i don't think the plugin works. You said that I need to match the versions, am I using tailwind 0.16.19? Do you think i need to upgrade it in order to use the plugin? Bellow is my imports:

"imports": {
    "$fresh/": "https://deno.land/x/fresh@1.5.2/",
    "preact": "https://esm.sh/preact@10.18.1",
    "preact/": "https://esm.sh/preact@10.18.1/",
    "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/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.3/plugin.js",
    "$std/": "https://deno.land/std@0.193.0/",
    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.21.0",
    "@supabase/gotrue-js":"https://esm.sh/@supabase/gotrue-js",
    "@/": "./",
    "./": "./",
    "$gfm": "https://deno.land/x/gfm@0.1.26/mod.ts",
    "feed": "https://esm.sh/feed@4.2.2"
  },

"imports": {
    "$fresh/": "https://deno.land/x/fresh@1.5.2/",
    "preact": "https://esm.sh/preact@10.18.1",
    "preact/": "https://esm.sh/preact@10.18.1/",
    "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/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.3/plugin.js",
    "$std/": "https://deno.land/std@0.193.0/",
    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.21.0",
    "@supabase/gotrue-js":"https://esm.sh/@supabase/gotrue-js",
    "@/": "./",
    "./": "./",
    "$gfm": "https://deno.land/x/gfm@0.1.26/mod.ts",
    "feed": "https://esm.sh/feed@4.2.2"
  },

13 replies

DDeno

•Created by wedman on 5/28/2024 in #help

A Question about Tailwind plugins in Fresh

I think it all works now, thanks a ton!:P

13 replies

DDeno

•Created by wedman on 5/28/2024 in #help

A Question about Tailwind plugins in Fresh

D:\Indie Array\indiearray.com>deno task start
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
error: Relative import path "tailwindcss/plugin" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/tailwindcss-animate@1.0.7/X-ZS90YWlsd2luZGNzcw/denonext/tailwindcss-animate.mjs"
    at https://esm.sh/v135/tailwindcss-animate@1.0.7/X-ZS90YWlsd2luZGNzcw/denonext/tailwindcss-animate.mjs:2:23
Watcher Process failed. Restarting on file change...

D:\Indie Array\indiearray.com>deno task start
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
error: Relative import path "tailwindcss/plugin" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/tailwindcss-animate@1.0.7/X-ZS90YWlsd2luZGNzcw/denonext/tailwindcss-animate.mjs"
    at https://esm.sh/v135/tailwindcss-animate@1.0.7/X-ZS90YWlsd2luZGNzcw/denonext/tailwindcss-animate.mjs:2:23
Watcher Process failed. Restarting on file change...

13 replies

DDeno

•Created by wedman on 5/28/2024 in #help

A Question about Tailwind plugins in Fresh

Thanks for the quick respond. My config file looks like this:

import { Options } from "$fresh/plugins/twind.ts";
import animate from "https://esm.sh/tailwindcss-animate@1.0.7";

export default {
  selfURL: import.meta.url,
  plugins: [
    animate,
  ],
  theme: {
    extend: {
      animation: {
        "bounce-delayed": "bounce 1s linear infinite 1s"
      }
    }
  }
} as Options;

import { Options } from "$fresh/plugins/twind.ts";
import animate from "https://esm.sh/tailwindcss-animate@1.0.7";

export default {
  selfURL: import.meta.url,
  plugins: [
    animate,
  ],
  theme: {
    extend: {
      animation: {
        "bounce-delayed": "bounce 1s linear infinite 1s"
      }
    }
  }
} as Options;

I haven't installed it through npm.

13 replies

DDeno

•Created by wedman on 2/12/2024 in #help

Problem rerender a island when updating the value of a signal!

This can really come in handy, thanks allot!:)

8 replies

DDeno

•Created by wedman on 2/12/2024 in #help

Problem rerender a island when updating the value of a signal!

Thank you! That made it work. My hypothesis was that it should work using the signals directly, but clearly it wasn't correct. Is there some fundamentals about fresh that i don't quite understand that I should read about?

8 replies

DDeno

•Created by wedman on 2/12/2024 in #help

Problem rerender a island when updating the value of a signal!

Thank you in advance!🙏 :hooray_deno:

8 replies

DDeno

•Created by wedman on 12/13/2023 in #help

How can I make sure the code gets run on the client-side??!

Probably should do a bit of research so i get the grasp of things:)

13 replies

DDeno

•Created by wedman on 12/13/2023 in #help

How can I make sure the code gets run on the client-side??!

Ahh! Now when I think about it I think I have had a similar problem in the past. I'm such a doofus! <:deno_thankyou:1181938324273893376>

13 replies

DDeno

•Created by wedman on 12/13/2023 in #help

How can I make sure the code gets run on the client-side??!

No its just a route that the user gets redirected to after authenticating with google

13 replies

DDeno

•Created by wedman on 12/13/2023 in #help

How can I make sure the code gets run on the client-side??!

Thanks for helping out! 🙂 So now I don't get any errors but I suspect that the useEffect isn't running? I can't see any logs.

import { useEffect } from "preact/hooks";

export default function Callback() {

    useEffect(() => {
        console.log("is useEffect")
        if (typeof window !== 'undefined') {
            // window is now available
            isClient.value = true;
            console.log(window.location.hash)
            // Perform your operations with window.location.hash here
        }
    }, []);

    return (
        <div>
            ....
        </div>
    );
}

import { useEffect } from "preact/hooks";

export default function Callback() {

    useEffect(() => {
        console.log("is useEffect")
        if (typeof window !== 'undefined') {
            // window is now available
            isClient.value = true;
            console.log(window.location.hash)
            // Perform your operations with window.location.hash here
        }
    }, []);

    return (
        <div>
            ....
        </div>
    );
}