Dark mode implementation with Color Mode module.
TailwindCSS takes advantage of the `dark` class on the html tag:
{{ code4 }}
The `@nuxtjs/color-mode` module is now installed by default, you can easily implement a toggle button:
{{ code1 }}
A number of shortcuts are available to make your life with colors easier.
For each color utilities: `bg`, `text`, `border`, `ring` and `divide`, shortcuts for `white`, `black` and `gray` colors are generated (based on your prefix `u` by default) that handles the dark mode automatically:
{{ code3 }}
For example `u-bg-gray-100` is a shortcut for `bg-gray-100 dark:bg-gray-800`. Take a look at the shortcuts definitions.