React v19项目中Tailwind CSS集成报错求助

问题场景 #

我通过Vite创建React 19项目：

npm create vite@latest my-portfolio -- --template react

进入项目目录后安装Tailwind相关依赖：

npm install -D tailwindcss postcss autoprefixer

由于React 19环境下npx tailwindcss init -p无法正常运行，我手动创建了以下配置文件：

tailwind.config.js #

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js #

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

同时在src/index.css中添加Tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

执行npm run dev后出现报错：

[plugin:vite:css] [postcss] 看起来你正尝试直接将tailwindcss作为PostCSS插件使用。PostCSS插件已迁移至独立包，若要继续通过PostCSS使用Tailwind CSS，你需要安装@tailwindcss/postcss并更新PostCSS配置。

解决方案 #

1. 安装新的PostCSS插件包 #

执行命令安装@tailwindcss/postcss：

npm install -D @tailwindcss/postcss

2. 更新PostCSS配置文件 #

修改postcss.config.js，将原有的tailwindcss替换为@tailwindcss/postcss：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

3. 重启开发服务 #

停止当前的npm run dev进程，重新执行：

npm run dev

完成以上步骤后即可正常加载Tailwind CSS，解决报错问题。

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