Posts Learn Components Snippets Categories Tags About
/

TailwindCSS Typography Plugin Dark Mode

Learn how to make typography plugin have a dark mode variant and find out how the best configuration.

Created on Aug 24, 2021

16 views

In this short snippet, you will learn how to enable and apply the dark mode variant for TailwindCSS Typography plugin. The steps will involve defining a custom theme configuration so let's get started and create a custom variant for Tailwind CSS Typography dark mode.

Step 1: Install Tailwind CSS Typography Plugin


Firstly install the typography plugin using npm or yarn. This command will install the latest typography version.
# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

Step 2: Require Tailwind CSS Plugin in Configuration


To require the plugin, you can use the "require" method and put it in the "plugins" array. If you do prefer to use import then pass in the imported value to the array as well.
// tailwind.config.js

module.exports = {
    // other configurations here

    theme: {},

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

Step 3: Update Theme Configuration


Once it's ready, you can update the "theme" configuration by extending the typography plugin. Do note that by default the styling will be under the "DEFAULT" key while any of the dark stylings will be under the "dark" key. You can define the styling for each HTML tag for e.g "h2" (heading) and "p" (paragraph) tag to have a certain styling when each mode is enabled.
theme: {
    extend: {
        typography: (theme) => ({
            // all your dark themes styling for each HTML tag will be defined here
            dark: {
                css: {
                    "h2": {
                        color: theme("colors.gray.400"),
                    },
                    "pre": {
                        color: theme("colors.gray.400"),
                        backgroundColor: theme("colors.gray.900")
                    },
                    color: theme("colors.gray.200"),
                    "figcaption": {
                        color: theme("colors.gray.200"),
                    },
                    "strong": {
                        color: theme("colors.gray.200"),
                    },
                    "a": {
                        color: theme("colors.gray.200"),
                    },

                    // define your other configuration here
                },
            },
            // default styling goes here
            DEFAULT: {
                css: {
                    "h2": {
                        "color": theme("colors.gray.800"),
                        "margin-bottom": 0,
                        "font-size": "24px",
                        "font-weight": 600,
                    },
                    "figure": {
                        "margin-bottom": 0,
                    },

                    // define your other configuration here
                }
            }
        })
    }
},

Final Step


Do note that you have to run the watch command to build this and recompile Tailwind CSS. If you are using Laravel Mix the command will be as follows.
yarn watch // watch for any changes and compile

yarn prod // compile for production
By having those styling defined, toggling the modes will apply the unique style based on each of the configurations. 

Other Reads

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for TailwindCSS Typography Plugin Dark Mode

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More