运行React-Vite时出现[plugin:vite:esbuild]服务已停止错误求助

核心问题 #

你把Tailwind CSS的PostCSS插件错误地放到了Vite的插件数组里，这是导致esbuild服务崩溃的关键原因——@tailwindcss/postcss是PostCSS插件，不是Vite插件，不能直接在vite.config.js的plugins中注册。

修复步骤 #

1. 创建PostCSS配置文件
   在项目根目录新建postcss.config.js，添加以下内容：

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

   （autoprefixer是Tailwind CSS官方推荐搭配的插件，用于自动添加浏览器前缀）

2. 修正vite.config.js
   移除plugins数组中的tailwindcss()，修改后的配置文件如下：

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

3. 清理缓存并重启服务

   • 先停止当前运行的开发服务（按Ctrl+C）
   • 删除Vite缓存目录：rm -rf node_modules/.cache（Windows系统执行rmdir /s node_modules\.cache）
   • 重新执行npm run dev

额外排查（若上述步骤无效） #

• 检查依赖版本兼容性：确保vite、@vitejs/plugin-react、tailwindcss、postcss的版本互相匹配，可参考各工具官方文档的版本要求
• 排查端口或进程冲突：尝试更换Vite开发端口，在vite.config.js中添加配置：server: { port: 3001 }

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