如何修改TailwindCSS中触发暗模式切换的默认类名

可以自定义暗模式触发类名，Tailwind CSS v3.1及以上版本已原生支持该能力，无需额外插件。

你只需要修改tailwind.config.js中的darkMode配置项，将原本的字符串'class'替换为数组格式，第二个参数传入你期望的触发类选择器即可，示例如下：

// tailwind.config.js
module.exports = {
  // 第二个参数为自定义触发类，注意需带类选择器前缀.
  darkMode: ['class', '.dark-mode'],
  // 其余原有配置保持不变
  // ...
}

配置生效后，原有以dark:为前缀的暗模式样式类无需修改，只要DOM树上层存在.dark-mode类时，暗模式样式就会自动生效，完美适配你所说的「已有固定暗模式类名无法修改」的场景。

该配置还支持传入任意合法CSS选择器，比如你需要通过data-theme属性触发暗模式，可直接写为darkMode: ['class', '[data-theme="dark"]']。

如果你使用的是v3.1以下的旧版本Tailwind CSS，建议优先升级到最新稳定版使用原生能力，兼容性和稳定性更优。

内容的提问来源于stack exchange，提问作者pirt