How can I efficiently customize Tailwind CSS’s typography utilities to support both light and dark modes without repeating too much configuration?

[PatrickMeirelles]

I’m trying to use Tailwind’s typography plugin to style prose (e.g., blog posts). I’d like to define a base set of typography styles (font sizes, colors, spacing, etc.) and then override mostly color-related utilities when switching between light and dark mode. Right now, I find myself duplicating a lot of configuration under theme.extend.typography.DEFAULT and theme.extend.typography.dark. Is there a cleaner or more maintainable way to achieve this?

[victormoni]

[wongjn]

The .dark would only work if you have dark class set as the dark mode selector. Furthermore, the theme() function with dot syntax is deprecated in v4. Also, the :root and .dark rules here would never actually apply since they would be overridden by the .prose class rule itself later on anyway.

You don't actually need the .dark rule if you utilize the --tw-prose-invert CSS variables. As per the docs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            --tw-prose-body: theme(colors.slate.700);
            --tw-prose-headings: theme(colors.slate.900);
            --tw-prose-links: theme(colors.indigo.600);
            --tw-prose-invert-body: theme(colors.slate.300);
            --tw-prose-invert-headings: theme(colors.slate.100);
            --tw-prose-invert-links: theme(colors.indigo.400);

The prose-invert switches to automatically use the --tw-prose-invert versions.

Also note, the CSS in DEFAULT gets applied to all other prose-* classes, so you would only need to tweak colors for other prose-<color>-like entries.