为何daisyUI主题无法应用于@tailwindcss/typography？

我正在使用Fresh框架，希望应用daisyUI的排版主题，但当前页面的排版样式来自原生@tailwindcss/typography插件，而非daisyUI。以下是我的配置代码：

deno.json #

"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/",
  "tailwindcss": "npm:tailwindcss@3.3.5",
  "typography": "npm:@tailwindcss/typography",
  "daisyui": "npm:daisyui@4.4.19",
  "$std/": "https://deno.land/std@0.212.0/",
  "$gfm": "https://deno.land/x/gfm@0.2.5/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, 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> 
}

原因分析 #

1. 插件加载顺序导致样式优先级问题：当前先加载原生@tailwindcss/typography插件，再加载daisyUI，原生插件的prose样式会先注入，daisyUI的主题化排版样式无法覆盖原生样式。
2. 未使用daisyUI主题对应的prose变体类：daisyUI的排版样式是基于主题定制的，默认prose类只会调用原生样式，需要明确指定主题对应的prose变体才能触发daisyUI的排版样式。

解决方案 #

方案1：调整插件加载顺序

将daisyUI放在typography插件之前加载，让daisyUI的基础样式先注入，原生typography的样式会被daisyUI的主题化样式覆盖：

// tailwind.config.ts
plugins: [daisyui, typography], // 交换两个插件的顺序

方案2：使用daisyUI主题特定的prose类

在组件中添加对应主题的prose变体类（比如当前使用的*lemonade*主题，就添加*prose-lemonade*类）：

// routes/index.tsx
export default function Test() {
  return <div class="prose prose-lemonade" >
    {/* 内容保持不变 */}
  </div> 
}

方案3：配置typography插件继承daisyUI主题变量

让原生typography插件直接使用daisyUI的主题颜色变量，实现排版样式与daisyUI主题同步：

// tailwind.config.ts
export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  plugins: [
    typography({
      theme: {
        extend: {
          colors: {
            primary: 'var(--p)',
            secondary: 'var(--s)',
            neutral: 'var(--n)',
          },
        },
      },
    }),
    daisyui,
  ],
  daisyui: {
    themes: ["light", "dark", "lemonade", "autumn", "aqua", "nord" ],
    logs: false
  },
} satisfies Config

内容的提问来源于stack exchange，提问作者Ooker