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))',
            },
            // 他のタグの設定
          },
        },
      },
    },
  },
} satisfies Config