如何用纯CSS针对Tailwind CSS深色模式修改自定义类样式？

根据你使用的Tailwind深色模式类型，有两种实现方式：

1. 跟随系统深色模式（默认行为） #

Tailwind默认通过prefers-color-scheme媒体查询识别系统深色模式设置，在自定义CSS中添加以下代码即可：

@media (prefers-color-scheme: dark) {
  .hamburgerTop,
  .hamburgerMiddle,
  .hamburgerBottom {
    background: #fff;
  }
}

2. 手动切换的class模式 #

如果你在tailwind.config.js中配置了darkMode: 'class'（通过给根元素添加dark类触发深色模式），则需要这样写：

.dark .hamburgerTop,
.dark .hamburgerMiddle,
.dark .hamburgerBottom {
  background: #fff;
}

两种方式的核心都是针对深色模式的触发条件，给自定义汉堡类覆盖background属性值，确保深色模式下背景色切换为白色。

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