React+TailwindCSS项目使用dark模式类dark:bg-gray-800报不存在错误

错误原因 #

这个报错是因为Tailwind CSS默认未开启暗色模式支持，不会识别dark:前缀的工具类，因此检测不到dark:bg-gray-800的定义。

解决步骤 #

• 第一步：找到项目根目录下的tailwind.config.js配置文件，若文件不存在，执行命令npx tailwindcss init生成。
• 第二步：在配置文件中添加darkMode配置项，值根据你的使用场景二选一：
  • 填'media'：暗色模式自动跟随系统设置切换
  • 填'class'：通过给根元素添加/移除dark类手动控制暗色模式切换
    配置示例如下：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    // 新增这一行配置
    darkMode: 'class',
    // 以下是原有配置，保持正常即可
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 第三步：保存配置文件后重启本地开发服务，报错即可消除。

补充注意事项 #

如果选择class模式的暗色方案，需要在项目根元素（通常是html标签）上添加dark类，对应的dark:前缀样式才会生效。
如果使用的是Tailwind CSS v2及以下版本，建议先升级到v3以上稳定版本，避免兼容性问题。

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