更改 class 名称 TailwindCSS 用于切换暗模式

Question

TailwindCSS supports dark mode as a first-level feature.

要根据 HTML DOM 树中更高层应用的 class 手动切换启用它，您可以像

这样更新您的配置

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

根据文档

Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever dark class is present earlier in the HTML tree.

是否可以更改 class 名称来切换此行为？例如，如果我希望 class 被称为 dark-mode 而不是 dark?

这样做的一个原因是，如果应用程序中存在切换暗模式的 class 名称，但 class 的名称不受创建样式的设计人员控制。

Answer 1

dark class 似乎是硬编码的 https://github.com/tailwindlabs/tailwindcss/blob/691ed02f6352da17048dd14f742f7c82919e1455/src/corePlugins.js#L290 因此目前无法覆盖它。

更改 class 名称 TailwindCSS 用于切换暗模式

Change class name TailwindCSS uses to toggle dark mode

css

tailwind-css

darkmode