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

Did you find this page helpful?