是，漏了配置；Tailwind默认不启用dark:前缀，必须在tailwind.config.js中显式设置darkMode: 'class'或'darkMode: 'media'，否则所有dark:样式均被忽略。
dark:前缀没生效，是不是漏了配置？
不是 CSS 写错了，而是 Tailwind 根本没开启深色模式逻辑。dark:bg-gray-800 这类样式默认被忽略，除非你在 tailwind.config.js 显式声明 darkMode: 'class' 或 darkMode: 'media'。没这行，所有 dark: 都是无效字符串。
推荐用 darkMode: 'class'：它不依赖系统设置，调试方便（不用反复改 macOS 设置），也天然支持手动切换和 localStorage 持久化。别选 'media' 后又自己加 html.dark —— 两者冲突，样式会不可预测。
:root 里定义变量，为什么深色模式下颜色没变？
CSS 变量本身不响应媒体查询，必须在 @media (prefers-color-scheme: dark) 块里重新赋值，且作用域得对。常见错误是把变量写在局部选择器里，比如：
@media (prefers-color-scheme: dark) {
.card { --bg: #121212; } /* 错！.card 下才生效，body 用不到 */
}
正确做法是直接在 :root 上覆盖：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg: #ffffff;
--text: #000000;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
}
}
- 确保媒体查询块在 CSS 文件中初始加载就存在，不要用 JS 动态插入
<style></style>—— 浏览器不会监听它的变化 - 构建工具（如 Vite）若压缩 CSS 成单文件，要检查 PostCSS 插件是否意外删掉了整个
@media块
怎么让深色样式既响应系统偏好，又支持用户手动切换？
纯 @media (prefers-color-scheme: dark) 和纯 html.dark 是互斥的。要共存，得用层叠优先级控制：系统偏好设为默认，手动切换用更高优先级的选择器覆盖。
例如：
:root {
--bg: #ffffff;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
}
}</p><p>/<em> 手动开启时强制生效，优先级高于 media 查询 </em>/
html.dark :root {
--bg: #121212;
}
- JS 切换时只操作
document.documentElement.classList.toggle('dark') - 初始化时读取
localStorage.getItem('darkMode')，有值就加 class；没值则 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 服务端渲染（如 Next.js）必须在首屏 HTML 中就带上
class="dark"，否则会闪屏
color-scheme: light dark 有什么用，不加会怎样？
这个声明告诉浏览器：“我支持深色模式”，它不控制你的自定义样式，但影响原生控件外观。不加的话：
- 深色系统下，
<input>边框可能还是浅灰，和背景融在一起 - 滚动条 thumb 保持亮色，视觉割裂
-
<select></select>下拉箭头颜色异常
加一行就行，兼容性极好（不支持的浏览器直接忽略）：
:root {
color-scheme: light dark;
}
或者局部控制：.form-field { color-scheme: dark; }。Tailwind 的 dark: 不会自动加这个，得手写。
