tailwind-cssdenotypographyfreshjs

How to import tailwind plugins in Fresh?


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:


Solution

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