Benjamin Lannon

Select a theme. Click on the overlay or the button again to exit

Tackling dark mode with TailwindCSS

When using Tailwind, you may want to add functionality to integrate a dark mode into the site. By default Tailwind does not provide this, but there is a plugin you can add into your workflow to enable this. tailwindcss-dark-mode drops in various variants (dark:, dark-hover:, etc) to just append more utilities to your components when in a dark mode.

To load tailwindcss-dark-mode into Tailwind, install the npm module and then add a require call for the module in the plugins field of the Tailwind config and immediately invoke it.

module.exports = {
theme: {},
variants: {},
plugins: [require("tailwindcss-dark-mode")()],

Following, you need to tell Tailwind what utilities you want to use the dark and subsequent variants (If you don't know about custom variants, check out Tailwind Docs - Configuring Variants). If we want to add the default dark and a dark hover state to append to backgroundColor and textColor, the following would be done:

module.exports = {
theme: {},
variants: {
backgroundColor: ["hover", "responsive", " focus", "dark", "dark-hover"],
textColor: ["hover", "responsive", "focus", "dark", "dark-hover"],
plugins: [require("tailwindcss-dark-mode")()],

Then, this plugin will trigger utilities when the mode-dark class is around. With a snippet of JS, you can use the window.matchMedia function and check if the prefers-color-scheme media query would trigger to add a class to the root element.

function checkDarkMode() {
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
return true;
return false;

if (checkDarkMode()) {
} else {

Finally, if we add some classes to an HTML page (or whatever template language / framework you are using for your website), if you add dark: in front of various classes, it will trigger when in dark mode:

<body class="dark:bg-gray-800">
<div class="max-w-2xl my-5 mx-auto dark:text-white">
<h1 class="text-3xl text-purple-700 dark:text-teal-400">Hello World</h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto iusto
dolores corporis asperiores porro velit ipsum voluptatum, autem, veniam
nesciunt ipsa aut voluptatibus itaque quaerat. Rem aspernatur quam porro

Example in light mode

Example in dark mode