How to import tailwind plugins in Fresh?

124 Views Asked by At

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/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "tailwindcss": "npm:[email protected]",
    "tailwindcss/": "npm:/[email protected]/",
    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
    "typography": "npm:@tailwindcss/typography",
    "daisyui": "npm:[email protected]",
    "$std/": "https://deno.land/[email protected]/",
    "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:

1

There are 1 best solutions below

1
Ooker On BEST ANSWER

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