The easiest way to achieve dark mode in tailwindcss

Here's a 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.