Tailwind Syntax Dark Mode

Original name

Original description

Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefers-color-scheme` strategy and user-toggleable class or attribute strategies, wiring the JavaScript toggle, swapping CSS-variable token values for light vs dark, or porting v3 `darkMode` configuration to the v4 `@custom-variant dark` directive. Prevents the four canonical dark-mode failures: assuming `dark:` utilities need configuration before they work, leaving v3's `darkMode: 'class'` config in a v4 project (silently ignored), forgetting the v4 `@custom-variant dark` directive when migrating from v3 `darkMode: 'class'`, and shipping a toggle that flashes the wrong theme on first paint because the script runs after CSS. Covers: default `media` strategy, class-based toggling (v3 `darkMode: 'class'` and 'selector', v4 `@custom-variant dark (&:where(.dark, .dark *))`), attribute-based toggling (`[data-theme="dark"]`), custom variant strategies, theme-token swap via CSS variables, and the canonical JavaScript toggle snippet using `localStorage` plus `matchMedia`. Always shows v3 and v4 in side-by-side blocks; never fuses a single snippet that hides the version difference (per D-008). Keywords: dark mode, dark variant, dark:bg-, dark:text-, prefers-color-scheme, darkMode class, darkMode selector, custom-variant dark, where dark class, data-theme dark, toggle dark mode, localStorage theme, matchMedia, next-themes, light dark system, color scheme, how do I add dark mode, dark mode not working, dark utilities ignored, flash of wrong theme, FOUC, flash of unstyled content, OS dark mode, system theme, v3 to v4 dark mode migration, darkMode config removed.