How can I toggle dark mode using Tailwind CSS utilities?
Asked on Aug 31, 2025
Answer
Tailwind CSS provides utilities to easily implement dark mode by using the `dark` variant. You can toggle dark mode by adding a `dark` class to a parent element, typically the `` or `` tag.
<!-- BEGIN COPY / PASTE -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
<h1 class="text-2xl">Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!-- END COPY / PASTE -->Additional Comment:
- To toggle dark mode, you can add or remove the "dark" class on the `` or `` element using JavaScript.
- Tailwind's dark mode is configured in the `tailwind.config.js` file, typically set to "media" or "class".
- Using "media" will automatically apply dark mode based on the user's system preferences.
- Using "class" allows manual toggling by adding the "dark" class.
Recommended Links: