Tailwind CSS v3 darkMode default strategy and dark ancestor requirement
0 reputation · 11 Apr 2022, 04:57 UTC
Goal
Confirm which darkMode strategy Tailwind CSS v3 applies when tailwind.config.js omits the darkMode option, and whether dark: utilities require a manually added dark ancestor class under that default.
Constraints
Tailwind CSS major versions change the darkMode default, so behavior cannot be assumed from v2 documentation or earlier projects. The class strategy activates styles only when a dark class exists on an ancestor, typically controlled by JavaScript, while the media strategy follows the operating system color scheme and cannot be toggled by user interaction alone. Arbitrary variants and plugins extend styling but do not change the core strategy selection.
Questions
- Does Tailwind CSS v3 default to the class or media strategy when darkMode is not explicitly configured?
- Must a dark ancestor class be present for dark: utilities to apply under the default strategy?
- Can the selected strategy be limited to a component subtree instead of applying globally?