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.
Firstly install the typography plugin using npm or yarn. This command will install the latest typography version.
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.
