Add Dark Mode support to @tailwindcss/typography

Last week the @tailwindlabs-team released the @tailwindcss/typography-plugin. It's the perfect solution to apply Tailwind CSS to HTML you can't control. Like the content created through a CMS or static site generator.

In 2018 I've written about how you can use Tailwind's screen-utility to add support for dark mode or prefers-color-scheme, as it's officially called.

In this post I would like to showcase, how you can configure the typography-plugin to support dark mode too.

Preparations #

You need to have at least Tailwind CSS v1.5.0 and the new typography-plugin installed in your project. Follow the install instructions for Tailwind CSS and the typography plugin. If everything works, come back to this post.

Add general Support for Dark Mode to Tailwind CSS #

As mentioned, back in 2018 I've written about a low cost approach to add dark mode support to Tailwind CSS: Adding an additional screen modifier.

Let's update our tailwind.config.js to add a new screen modifier.

module.exports = {
    theme: {
        extend: {
            screens: {
                'dark-mode': { raw: '(prefers-color-scheme: dark)' },
            },
        },
    },
};

After compiling your CSS, you can style your site for light and dark mode by using dark-mode:*-classes.

<div class="bg-gray-100 dark-mode:bg-gray-800">
    <!-- Rest of your code -->
</div>

Add Dark Mode Configuration for Typography Plugin #

Next, let's add a new modifier to the typography plugin: dark. Open your tailwind.config.js file and add a new dark-object to theme.typography.

Here's how my config looks like. I've overriden the default, light mode colors for anchors to be blue-700 and for text to be gray-900.

Next come my dark mode settings. The text colors for text, links and heading and figure captions all have been updated to look great on a dark background.

These are examples, though. To give your site your personality, update these values to your liking.

module.exports = {
    theme: {
        typography: (theme) => ({
            default: {
                css: {
                    color: theme('colors.gray.900'),
                    a: {
                        color: theme('colors.blue.700'),
                        '&:hover': {
                            color: theme('colors.blue.700'),
                        },
                    },
                },
            },

            dark: {
                css: {
                    color: theme('colors.gray.300'),
                    a: {
                        color: theme('colors.green.500'),
                        '&:hover': {
                            color: theme('colors.green.500'),
                        },
                    },

                    h1: {
                        color: theme('colors.gray.300'),
                    },
                    h2: {
                        color: theme('colors.gray.300'),
                    },
                    h3: {
                        color: theme('colors.gray.300'),
                    },
                    h4: {
                        color: theme('colors.gray.300'),
                    },
                    h5: {
                        color: theme('colors.gray.300'),
                    },
                    h6: {
                        color: theme('colors.gray.300'),
                    },

                    strong: {
                        color: theme('colors.gray.300'),
                    },

                    code: {
                        color: theme('colors.gray.300'),
                    },

                    figcaption: {
                        color: theme('colors.gray.500'),
                    },
                },
            },
        }),
    },
};

Update your HTML #

Let's bring everything together by updating the HTML of our site. To support light mode and get the general styling, you have to add the prose-class to your template.

<article class="prose">
    <!-- Your content here -->
</article>

To support both light and dark mode, add the dark-mode:prose-dark class to the HTML element which wrapps your dynamic content.

<article class="prose dark-mode:prose-dark">
    <!-- Your content here -->
</article>

This change tells Tailwind to apply the dark styles when a user visits your site with Dark Mode enabled.

Note #

If you're reading this article with dark mode enabled, you might have noticed that my website is light and bright. While adding the typography plugin I've realized that I didn't like the dark mode version of my site. I've temporarily removed the dark styles while I'm working on a new version.