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

2024年4月9日#tailwind #remix404

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

使用官方提供的prose-invert或自定义颜色在tailwind的配置文件中设置颜色。

最簡單的方法就是使用官方提供的 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))',
            },
            // 其他標籤設置
          },
        },
      },
    },
  },
} 滿足 Config