如何在Tailwind CSS中启用暗色模式-css教程-PHP中文网

darkmode 必须显式配置为 'media' 或 'class'，否则 dark: 类不生成；需顶层设置、html 元素加 dark 类、同步 localstorage 与 storage 事件监听，并手动补全 dark: 变体。

如何在tailwind css中启用暗色模式

darkMode 必须显式配置，否则 dark: 类根本不会生成

不配 darkMode，dark:bg-gray-900 这类写法就等于没写——Tailwind 编译时直接跳过所有 dark: 变体，连 CSS 规则都不会输出，更别说生效了。

合法值只有两个：'media' 或 'class'。常见错误包括：

darkMode: true、darkMode: 'dark'、darkMode: '' —— 全部无效
把 darkMode: 'class' 写进 theme.extend 或 plugins 里 —— 必须是顶层字段
TypeScript 配置中类型导出不完整（如漏掉 @types/tailwindcss），导致配置未被读取

正确写法（tailwind.config.js）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: 'class', // ✅ 必须在这里，不能缩进或嵌套
  theme: {
    extend: {},
  },
  plugins: [],
}

class 模式下，dark 类必须加在上，且得同步设置

Tailwind 只认 document.documentElement（即元素）有没有 dark 类。加在上完全无效，尤其在 Next.js/Nuxt 等 SSR 框架中会触发 hydration error。

首屏“闪白”不是 bug，是执行时机问题：CSS 先渲染浅色样式，JS 后加类才切深色。解决方法只有一种：

脚本必须内联在里，不能用 DOMContentLoaded 或 window.onload
必须用 IIFE 立即执行，且包裹 try/catch（服务端环境无 window）
优先读 localStorage.getItem('theme')，fallback 到 window.matchMedia('(prefers-color-scheme: dark)').matches

最小可用初始化脚本：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

(() => {
  try {
    const saved = localStorage.getItem('theme')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    const shouldDark = saved === 'dark' || (saved !== 'light' && prefersDark)
    document.documentElement.classList.toggle('dark', shouldDark)
  } catch {}
})()