darkmode: 'media' 可使 tailwind 响应系统主题，但需在 tailwind.config.js 中显式声明并确保 css 中使用 dark: 前缀类，且基础色类不可缺失。
直接配 darkMode: 'media' 就能响应系统主题，但必须确认两件事：tailwind.config.js 里写了它，且你的 CSS 文件里实际用到了 dark: 前缀类。
tailwind.config.js 必须显式声明 darkMode: 'media'
不写这个字段，或写成 darkMode: true、darkMode: 'dark'，Tailwind 编译时会直接丢弃所有 dark: 类——连警告都不报。v3 起虽默认行为倾向 'media'，但显式声明是唯一可靠做法。
-
darkMode: 'media'是唯一合法值之一（另一个是'class'） - 它让 Tailwind 生成的 CSS 包含
@media (prefers-color-scheme: dark) { ... }规则 - 如果你用的是 JIT 模式，还要确保
content配置包含所有用到dark:的模板文件，否则类名可能被剔除
dark: 类只在媒体查询生效时起作用，不依赖 HTML 类名
darkMode: 'media' 完全绕过 JS 和 DOM 操作。你给 加类没用，浏览器也无视它；用户切系统深色模式，样式立刻响应，哪怕你 JS 里强行加了 dark 类也没影响。
- 典型用法：
bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 - 错误写法：以为要配合 JS 控制
document.documentElement.classList—— 这是class模式的事 - 验证是否生效：关掉系统深色模式，页面变亮；打开后变暗；中间不闪、不跳、无 JS 干预
常见失效原因：不是配置错，而是没用对
最常遇到的“配了但不起作用”，其实不是 Tailwind 问题，而是开发习惯导致的漏项：
- 只写了
dark:bg-gray-800，但没在对应元素上写基础色（如bg-white），导致深色下没对比 - CSS 变量或自定义属性没做系统适配，比如
color: var(--text-color)仍取浅色值 - 用了第三方组件库，其内部样式没走 Tailwind 的
dark:逻辑，需单独覆盖 - 本地开发服务器缓存了旧 CSS，改完 config 没重启构建进程，导致新规则未注入
media 模式真正的限制不在技术实现，而在于它根本没法记住用户偏好——系统一换，页面就变。如果你需要“用户点了开关才切”或“登录后保持上次选择”，darkMode: 'class' 才是实际选项，media 只适合纯展示型、无交互逻辑的静态页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
