Tailwind supports dark mode out of the box! You just add the dark variant to your classes and toggle dark mode by adding class="dark" on a parent element (usually <html> or <body>).
Tailwind has two popular dark mode strategies: 'media' (auto based on user system preferences) and 'class' (manual toggle). The 'class' strategy gives you full control over when dark mode activates.
This snippet uses the 'class' strategy and toggles dark mode on the html tag:
dark: prefix on any Tailwind class to apply styles only in dark mode, like dark:bg-gray-800 or dark:text-yellow-400.