如何在Vite+React项目中实现TailwindCSS v4暗黑模式？代码未生效

你把Tailwind的暗黑模式配置放错地方了——这个配置应该写在tailwind.config.js里，而非vite.config.js，这就是配置不生效的原因。按以下步骤调整：

• 先确保项目里有tailwind.config.js文件，没有的话执行初始化命令：

  npx tailwindcss init
  

• 修改tailwind.config.js，添加暗黑模式配置：

  /** @type {import('tailwindcss').Config} */
  export default {
    darkMode: 'media', // 跟随系统的媒体偏好自动切换暗黑模式
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}", // 确保Tailwind能扫描到所有需要样式的文件
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 删掉vite.config.js里的darkMode: "media"字段，因为Vite不识别这个配置项，修改后的vite.config.js如下：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import tailwindcss from '@tailwindcss/vite'
  
  export default defineConfig({
    plugins: [
      react(),
      tailwindcss(),
    ],
  })
  

• 验证效果：在组件里使用暗黑模式专属类，比如：

  <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white min-h-screen">
    测试暗黑模式
  </div>
  

  切换系统的暗黑模式，就能看到样式自动切换了。

如果需要手动控制暗黑模式（不是跟随系统），可以把tailwind.config.js里的darkMode设为'class'，然后通过给根元素（比如html标签）添加/移除dark类来切换模式。

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