wedmaniac•7mo ago

A Question about Tailwind plugins in Fresh

Hi there! I recently found this plugin for Tailwind: https://github.com/jamiebuilds/tailwindcss-animate, which is supposed to help to define even more properties on the tailwind animations. For example

animate-hover delay-20

animate-hover delay-20

if I have understood everything correctly. However I have really struggled to import it. How would one go about importing this into a fresh fresh.js project. I'm using Fresh.1.5.2, Thanks in advance;)

9 Replies

marvinh.•7mo ago

Tailwindcss plugins need to be configured in tailwind's configuration file. Have you done that as outlined in the readme file of that project?

wedmaniacOP•7mo ago

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.

marvinh.•7mo ago

that looks fine what happens when you change the https://esm.sh/tailwindcss-animate@1.0.7 import to this: https://esm.sh/tailwindcss-animate@1.0.7?external=tailwindcss

wedmaniacOP•7mo ago

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...

marvinh.•7mo ago

Ok that looks better, is there a. tailwindcss/plugin alias set up in your import map? It should've been set up by default by Fresh. If not you can add it (make sure to match tailwind versions)

"tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"

"tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"

wedmaniacOP•7mo ago

I think it all works now, thanks a ton!:P @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"
  },

marvinh.•7mo ago

No, you're not using tailwind at all. You're using twind

marvinh.•7mo ago

You might want to switch from twind to tailwindcss https://fresh.deno.dev/docs/examples/migrating-to-tailwind

Migrating to Tailwind | Fresh docs

Migrating from twind to Tailwind CSS

wedmaniacOP•7mo ago

Haha, ohhh my! Im dufos!:P Thanks for the clarification!:P

A Question about Tailwind plugins in Fresh

Did you find this page helpful?