To enable dark mode in Tailwind CSS, update your tailwind.config.js file with the darkMode option. You can choose between two different dark mode strategies: [data-mode="dark"] or class.

Using [data-mode="dark"], the dark mode is enabled based on the user's operating system preference:

module.exports = {
    darkMode: ['[data-mode="dark"]'],
    // ...
}

Using class, the dark mode is enabled by adding a .dark class to an ancestor element of your components:

module.exports = {
    darkMode: ['class'],
    // ...
}

To apply styles for dark mode, simply prefix your utility classes with dark: followed by the desired state variant, if any.

For example, if you want to change the background color of an element in dark mode, you can use the following code:

<div class="bg-white dark:bg-gray-800">
    <!-- Your content here -->
</div>