How toUse TailwindCSS Typography with Dark Mode Styles

Since TailwindCSS v2 it comes with dark mode support. Enabling it is really simple, in the tailwind.config.js add:

module.exports = {
  darkMode: "media", // or "class"
  // ...more config
}

Now, you would be able to use the dark: prefix which by default is enabled in all color related classes.

Tailwind Labs team also has a really useful Typography official plugin you can use to get a single class prose and use it to style content, specially useful when you receive HTML content without classes you can't style.

If you are using it with Dark Mode you will see the colors are probably not visible or are hard to read. This is because the Typography uses white colors.

One nice thing about the Typography plugin is that it's possible to add new variants and even replace the default one. We can use this to create a new prose-dark variant where we will only change the colors, let's change our Tailwind config to this one:

module.exports = {
  theme: {
    extend: {
      typography(theme) {
        return {
          dark: {
            css: {
              color: theme("colors.gray.300"),
              '[class~="lead"]': { color: theme("colors.gray.400") },
              a: { color: theme("colors.gray.100") },
              strong: { color: theme("colors.gray.100") },
              "ul > li::before": { backgroundColor: theme("colors.gray.700") },
              hr: { borderColor: theme("colors.gray.800") },
              blockquote: {
                color: theme("colors.gray.100"),
                borderLeftColor: theme("colors.gray.800"),
              },
              h1: { color: theme("colors.gray.100") },
              h2: { color: theme("colors.gray.100") },
              h3: { color: theme("colors.gray.100") },
              h4: { color: theme("colors.gray.100") },
              code: { color: theme("colors.gray.100") },
              "a code": { color: theme("colors.gray.100") },
              pre: {
                color: theme("colors.gray.200"),
                backgroundColor: theme("colors.gray.800"),
              },
              thead: {
                color: theme("colors.gray.100"),
                borderBottomColor: theme("colors.gray.700"),
              },
              "tbody tr": { borderBottomColor: theme("colors.gray.800") },
            },
          },
        };
      },
    },
  },

  variants: {
    extend: { typography: ["dark"] }
  },

  plugins: [require("@tailwindcss/typography")],

  darkMode: "media",
};

And now you can use our Tailwind classes like this:

<article class="prose dark:prose-dark">{{ html }}</article>

And with this you can use the Typography plugin with light and dark mode. You can also change the colors in the snippet above to customize your theme.

Demo? This website is using it, change between light and dark mode in your computer to see it in practice.