wedman
wedman3w 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.
marvinh.3w 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?
wedman
wedman3w 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.
marvinh.3w 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
wedman
wedman3w 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.
marvinh.3w 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"
wedman
wedman3w 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.
marvinh.3w ago
No, you're not using tailwind at all. You're using twind
marvinh.
marvinh.3w 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
wedman
wedman3w ago
Haha, ohhh my! Im dufos!:P Thanks for the clarification!:P