use-tailwind-typography-prose-in-dark-mode.md

Use Tailwind Typography Prose In Dark Mode

Tailwindcss can be set up to provide styled defaults for both standard (light) mode and dark mode. Once this is set up, you can add a toggle mechanism to switch between light and dark mode. This post goes into all those details.

This can even be used with Tailwind's typography plugin. typography provides default styling which is great if you don't control the markup that is being rendered or if you want to provide some defaults to a chunk of markup.

A chunk of markup that uses typography will minimally look something like this:

<div className="prose">
  <h1>{title}</h1>
  {markdownAsHtml}
</div>

To give this reasonable dark mode defaults, you'll need to add a dark-mode class as well. Using the dark prefix, you can apply the prose-dark class to the top-level div.

<div className="prose dark:prose-dark">
  <h1>{title}</h1>
  {markdownAsHtml}
</div>