最简单方式是启用 Tailwind 内置 dark:* 变体并设 darkMode: 'class'，通过切换 的 dark 类实现可控暗色模式，配合 localStorage 持久化与系统偏好读取，所有支持变体的工具类均可加 dark: 前缀定义暗色样式。
直接在 Tailwind CSS 中启用暗色模式，最简单的方式是使用内置的 dark:* 变体，并配合系统偏好或手动切换逻辑。不需要额外写 CSS，也不用管理 class 切换的底层细节，Tailwind 已经封装好了。
开启 Tailwind 的暗色模式支持
确保你的 tailwind.config.js 中启用了暗色模式，并指定触发方式：
-
mode: 'class' —— 推荐。通过给
添加darkclass 来激活暗色样式（更可控，支持手动切换） -
mode: 'media' —— 自动跟随系统偏好（
@media (prefers-color-scheme: dark)），但无法手动干预
配置示例：
module.exports = {
darkMode: 'class', // ✅ 关键配置
content: [...],
theme: { ... },
plugins: [...],
}在 HTML 中应用 dark class
初始状态可不加 dark，由 JS 控制是否添加：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时读取 localStorage 或系统偏好，决定是否加
dark - 切换按钮只需执行：
document.documentElement.classList.toggle('dark') - 记得同步存到 localStorage，避免刷新丢失设置
用 dark:* 写响应式颜色和样式
所有支持变体的工具类，都能加 dark: 前缀来定义暗色下的表现：
-
bg-white dark:bg-gray-900—— 白底 → 深灰底 -
text-gray-800 dark:text-gray-200—— 深字 → 浅字 border-gray-200 dark:border-gray-700- 甚至支持
dark:hover:bg-blue-800这类组合
处理图片、SVG 和自定义组件
静态资源不会自动适配，需主动处理：
- 图标建议用 inline SVG 或支持主题的图标库（如 Lucide），避免用纯色 PNG
- 关键图片可准备两套，用
dark:hidden/hidden dark:block切换 - 自定义 CSS 类（如
.card）要显式写.dark .card { ... }，或改用@layer components+dark:变体
