Tailwind Typography 插件深色模式适配方法

最简单的方法就是使用官方提供的 prose-invert：

<div className="prose dark:prose-invert">
  ...
</div>

另一种方式：自定义颜色，例如我用的 shadcn/ui 想保持颜色统一，可以在 tailwind 的配置文件中进行设置：

// tailwind.config.js/ts
const config = {
  theme: {
    colors: {
      border: 'hsl(var(--border))',
      input: 'hsl(var(--input))',
      ring: 'hsl(var(--ring))',
      background: 'hsl(var(--background))',
      foreground: 'hsl(var(--foreground))',
      // 其他颜色设置
    },
    extend: {
      // ...
      typography: {
        DEFAULT: {
          css: {
            color: 'hsl(var(--foreground))',
            h1: {
              color: 'hsl(var(--primary))',
            },
            // 其他标签设置
          },
        },
      },
    },
  },
} satisfies Config