I'm using Fresh and want to apply daisyUI typography theme. Here is my code:
deno.json
"imports": {
"$fresh/": "https://deno.land/x/[email protected]/",
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"tailwindcss": "npm:[email protected]",
"typography": "npm:@tailwindcss/typography",
"daisyui": "npm:[email protected]",
"$std/": "https://deno.land/[email protected]/",
"$gfm": "https://deno.land/x/[email protected]/mod.ts",
"deno.importMap": "./import_map.json"
},
tailwind.config.ts
import { type Config } from "tailwindcss";
import typography from "typography"
import daisyui from "daisyui";
export default {
content: [
"{routes,islands,components}/**/*.{ts,tsx}",
],
// plugins: [typography],
plugins: [typography, daisyui],
daisyui: {
themes: ["light", "dark", "lemonade", "autumn", "aqua", "nord" ],
logs: false
},
} satisfies Config
static/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
routes/_app.tsx
import { type PageProps } from "$fresh/server.ts";
export default function App({ Component }: PageProps) {
return (
<html data-theme="lemonade" class="h-screen">
<link rel="stylesheet" href="/styles.css" />
<Component />
</html>
);
}
routes/index.tsx
export default function Test() {
return <div class="prose" >
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, quos esse similique magnam, eos libero ex optio perferendis temporibus inventore magni iure consequuntur itaque accusantium. Exercitationem, distinctio omnis? Delectus, quibusdam.</p>
<code>console.log(code)</code>
</div>
}
The code renders fine, but the style is from the vanilla plugin, not daisyUI. Why is that?