I'm using Fresh and I want to use two Tailwind plugins: daisyUI
and @tailwindcss/typography
. I don't use a separate import map. All are inside deno.jsonc
. If I just use the daisyUI
plugin then it works just fine. But I get this error when it's @tailwindcss/typography
:
error: Uncaught (in promise) TypeError: Relative import path "typography" not prefixed with / or ./ or ../ and not in import map from "file:///D:/QC%20supplements/Code/Apps/Tr%E1%BA%A5n%20K%E1%BB%B3/Web/tailwind.config.ts"
I suppose it's because the plugin name contains special characters that makes it hard to do the path correctly, but I don't know how to fix.
Here is my code:
deno.jsonc
:
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.6.1/",
"preact": "https://esm.sh/preact@10.19.2",
"preact/": "https://esm.sh/preact@10.19.2/",
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
"tailwindcss": "npm:tailwindcss@3.3.5",
"tailwindcss/": "npm:/tailwindcss@3.3.5/",
"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
"typography": "npm:@tailwindcss/typography",
"daisyui": "npm:daisyui@4.4.19",
"$std/": "https://deno.land/std@0.212.0/",
"deno.importMap": "./import_map.json"
}
tailwind.config.js
:
import { type Config } from "tailwindcss";
import typography from "typography"
import daisyui from "daisyui";
export default {
content: [
"{routes,islands,components}/**/*.{ts,tsx}",
],
plugins: [typography, daisyui],
daisyui: {
themes: ["light", "dark", "lemonade", "autumn", "aqua", "nord" ],
logs: false
},
} satisfies Config
Where do I get wrong?
Related articles:
I can't believe in my eyes. I make a test repo, and see that it still works. I suspect it's because of my folder structure because the fresh code in in the Web
folder, not in the root. I then add the import map:
"typography": "npm:@tailwindcss/typography",
to Web/deno.json
, not ./deno.json
and it imports sucessfully!
It seems like a bug to me. See also this related bug: How to resolve error: "Relative import path "$fresh/dev.ts" not prefixed with / or ./ or ../"