Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I implement dark mode toggle with Tailwind CSS?
Asked on Jan 08, 2026
Answer
To implement a dark mode toggle with Tailwind CSS, you can utilize Tailwind's dark mode feature, which allows you to apply different styles based on the user's system preference or a class toggle. Here's a simple example using a class-based approach.
<!-- BEGIN COPY / PASTE -->
<div class="dark:bg-gray-800 bg-white min-h-screen flex items-center justify-center">
<button onclick="document.documentElement.classList.toggle('dark')" class="bg-blue-500 text-white px-4 py-2 rounded">
Toggle Dark Mode
</button>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Ensure your Tailwind configuration is set to use class-based dark mode by adding `darkMode: 'class'` in your `tailwind.config.js` file.
- The example uses a button to toggle the "dark" class on the `documentElement`, which is the `` tag.
- Dark mode styles are prefixed with `dark:` in Tailwind, allowing you to define styles for both light and dark modes.
- This approach gives you full control over when dark mode is activated, independent of the user's system settings.
Recommended Links:
