顺风暗模式切换有效，但样式不变答案

【问题标题】：Tailwind dark mode toggle works but styles do not change顺风暗模式切换有效，但样式不变
【发布时间】：2021-07-06 01:26:29
【问题描述】：

我有一个 Laravel/React+Tailwind 项目。我有一个切换按钮，可以成功地将“dark”类添加到我的<html> 元素中：

但是，我使用的黑暗类不适用。在下一个屏幕截图中，我展示了 Tailwind 如何成功拾取 bg-blue-100（onload，默认为 'dark' 不在 <html> 元素类列表中）并应用，但我点击了“更改主题”，因此我的 <html> 元素包含“黑暗”类，但未应用顺风类 dark:bg-yellow-200。

我的顺风文件如下所示：

module.exports = {
  theme: {
    extend: {}
  },
  darkMode: 'class',
  variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
  plugins: [
    require('tailwindcss-dark-mode')()
  ]
};

我以前从未使用过 Tailwind，并且在谷歌搜索“反应顺风黑暗模式不起作用”时，我已经尝试了几乎所有我能找到的策略。有人能看出我的设置有什么问题吗？

【问题讨论】：

由于TailwindCSS v2.0.0 内置了对暗模式的支持，因此无需使用tailwindcss-dark-mode 插件。
谢谢！不幸的是，删除它并没有解决问题（但至少它减少了一个依赖！）
另外，您可以删除配置中的variants 条目。

标签： css reactjs tailwind-css

【解决方案1】：

我在 NPM 中更新到最新的 TailwindCSS 包，它解决了这个问题。

【讨论】：