Vite React项目启动报错：PostCSS无法找到tailwindcss模块

问题原因 #

从报错信息能明确看出：Vite会自动向上遍历目录查找PostCSS配置文件，你的项目上级目录D:\BlockChain下存在一个postcss.config.js，该配置里引用了tailwindcss插件，但当前项目并未安装这个依赖，因此触发了模块找不到的错误。

解决方案 #

以下方法任选其一即可：

• 删除上级目录的PostCSS配置文件
  如果D:\BlockChain下的postcss.config.js是无用的，直接删除它，Vite会自动使用当前项目的默认配置。

• 在当前项目创建专属PostCSS配置
  在项目根目录新建postcss.config.js，写入基础配置覆盖上级文件的影响：

  export default {
    plugins: {
      autoprefixer: {},
    },
  }
  

• 指定Vite仅使用当前项目的PostCSS配置
  修改项目根目录的vite.config.js，明确指定PostCSS配置文件路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    css: {
      postcss: './postcss.config.js'
    }
  })
  

• 安装tailwindcss依赖（可选）
  若需要使用上级配置中的tailwindcss，在当前项目执行安装命令：

  npm install tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

内容的提问来源于stack exchange，提问作者Asir Shahriar Roudra