Tailwind Typography Plugin Dark Mode Adaptation Method

Apr 9, 2024#tailwind #remix407

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The simplest method is to use the official prose-invert. Another way is to customize colors in the tailwind configuration file to maintain color consistency.

The simplest way is to use the prose-invert provided by the official:

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

Another way: Customize colors, for example, I use shadcn/ui and want to keep the colors consistent, you can set it in the tailwind configuration file:

// 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))',
      // Other color settings
    },
    extend: {
      // ...
      typography: {
        DEFAULT: {
          css: {
            color: 'hsl(var(--foreground))',
            h1: {
              color: 'hsl(var(--primary))',
            },
            // Other tag settings
          },
        },
      },
    },
  },
} satisfies Config