Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I implement dark mode toggle in Tailwind without using JavaScript?
Asked on Mar 28, 2026
Answer
Implementing a dark mode toggle in Tailwind CSS without JavaScript involves using the `dark` variant and leveraging the `prefers-color-scheme` media feature. This approach automatically applies dark mode based on the user's system preferences.
<!-- BEGIN COPY / PASTE -->
<html class="dark">
<head>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
<div class="p-4">
<h1 class="text-xl font-bold">Hello, Tailwind!</h1>
<p>This text will change color based on dark mode.</p>
</div>
</body>
</html>
<!-- END COPY / PASTE -->Additional Comment:
- Use the `dark` variant in Tailwind to define styles for dark mode, e.g., `dark:bg-gray-900`.
- The `prefers-color-scheme` media feature automatically switches styles based on user settings.
- Ensure your HTML element has the `class="dark"` to enable dark mode styles.
- This approach does not allow manual toggling; it relies on system preferences.
Recommended Links:
