Adebola's Blog

The easiest way to add dark mode with tailwindcss

September 06, 2020

Here’s the quickest way I’ve found to achieve dark and light mode theming in tailwindcss.

In tailwind.config.js

In this file, add the following screens to extend. i.e

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {},
      screens: {
        'light': { raw: '(prefers-color-scheme: light)' },
        'dark': { raw: '(prefers-color-scheme: dark)' }
      }
    },
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
  plugins: [],
}

Now, we can do something like dark:bg-red-700.

To test, open your Google dev tools console, click the 3 dots icon, click more tools then select rendering.

Under rendering, scroll down to Emulate CSS media feature prefers-color-scheme. In the dropdown, select prefers-color-scheme: dark

You should see our dark:bg-red-700 now take effect.


Written by Adebola Adeniran, I love Nigerian Jollof (> Ghana jollof) and Plantain. Follow me on Twitter.