Dark Mode
Implementing dark mode styling using the dark: variant and configuring toggles.
🧑🏫 Sabse pehle — simple mein samjho#
Website par "Dark Mode" add karna aajkal ek standard ban gaya hai. Tailwind mein dark mode lagana bahut easy hai. Tumhe bas class ke aage dark: lagana hai. Jaise normal mode mein background safed hai (bg-white), toh tum aage likh doge dark:bg-black. Jab user ka phone dark mode pe hoga, ya tum manually button se dark mode on karoge, toh Tailwind automatically dark: waali classes apply kar dega.
The dark: Variant#
Similar to hover states or responsive breakpoints, dark: is simply a variant you prepend to your utility classes.
<!-- Dark Mode Example (Requires system dark mode or HTML .dark class to activate) -->
<!-- Try changing bg-white to dark:bg-slate-900 directly to see the effect if you are in dark mode -->
<div class="max-w-sm mx-auto bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-slate-700 transition-colors duration-300">
<div class="h-24 bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-indigo-600 dark:to-purple-800"></div>
<div class="px-6 pb-6 pt-4 relative">
<div class="w-16 h-16 bg-white dark:bg-slate-900 rounded-full absolute -top-8 border-4 border-white dark:border-slate-800 flex items-center justify-center shadow-sm">
<span class="text-2xl">🌙</span>
</div>
<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-8 m-0 transition-colors">Theme Switcher</h2>
<p class="text-gray-500 dark:text-slate-400 mt-2 text-sm transition-colors">
This card smoothly transitions its background, text colors, and borders when dark mode is toggled using the dark: prefix.
</p>
<button class="mt-4 w-full py-2 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-800 dark:text-white font-semibold rounded-lg transition-colors">
Toggle Settings
</button>
</div>
</div>
How Tailwind Detects Dark Mode#
In modern Tailwind v4, dark mode behavior is controlled differently than in older versions.
By default, the dark: variant reacts to the CSS media query @media (prefers-color-scheme: dark). This means it automatically respects the user's operating system settings without you needing to do anything.
The "Selector" Strategy (Manual Toggle)#
If you want to provide a button on your website that allows users to manually toggle between light and dark themes (ignoring their OS preference), you need to change the configuration.
In Tailwind v4, this is typically handled by wrapping your app in a specific class or using data attributes. The most common pattern is applying a dark class to the root <html> tag.
When you click your theme toggle button, your React code should execute:
// Toggle the 'dark' class on the HTML element
document.documentElement.classList.toggle('dark');
To configure Tailwind v4 to look for this .dark class instead of relying on the media query, you add a specific theme directive to your main CSS file (where you import tailwind):
@import "tailwindcss";
@theme {
/* This tells Tailwind to use the selector strategy */
--variant-dark: .dark &;
}
Now, whenever the <html> tag has the class dark, all your dark:bg-black utilities will instantly activate!