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()) {
  document.documentElement.classList.add("mode-dark");
} else {
  document.documentElement.classList.remove("mode-dark");
}

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>
    <p>
      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
      molestiae.
    </p>
  </div>
</body>

Example in light mode

Example in dark mode