目录
目录
一、应用场景/背景描述：
二、开发流程：
三、详细开发流程：
四、总结/分析：
一、背景描述
我昨天在搭建一个 react 项目，为了稳妥起见，我使用了 react 18.2 这个稳定版本，但是我想使用一个 UI 组件库，shadcn ，它已经支持 19，tailwindcss也支持了 19，于是我就想切换成 19.于是开始了一系列踩坑之路。
背景：vite下react 18 切换成 react 19，安装tailwindcss，shadcn。
二、详细步骤
首先切换项目的 react 版本为 19，我这里是
"react": "19.0.0",
"react-dom": "19.0.0",
1.安装tailwindcss
文档：安装 - TailwindCSS中文文档 | TailwindCSS中文网
首先这三个步骤必须做：
npm install tailwindcss@next @tailwindcss/vite@next文档：Tailwind CSS v4.0 Beta - TailwindCSS中文文档 | TailwindCSS中文网
因为是实验性版本，我也犹豫要不要加，但是为了我后面的shadcn ,果断加了。
加完看看是否能使用，如果不能使用的话，添加这个：
npm install @tailwindcss/postcss配置：postcss.config.mjs（上面那个文档里的Installing with PostCSS 步骤）
export default {plugins: {'@tailwindcss/postcss': {},},
};此刻再去试试是否能使用pt-5 这种样式。
如果可以，则进行下面的步骤。
2. shadcn ui
文档：Vite - shadcn/ui
按照它的步骤走，基本没有问题。略。
三、可能出现的报错
[plugin:@tailwindcss/vite:generate:serve] Cannot convert undefined or null to object
我的报错位置是src/index.css这里的第一句：@import 'tailwindcss';
判断是下载的时候这个包有问题，于是我开始频繁的切换版本，先是换成 3.x 版本，可以允许，但是我再次韵如shadcn，我找不到适合3.x的版本的文档！让我下载这个：
我根据4.x版本的运行，运行不通，我最讨厌，因为版本不同导致后期的问题，那时候怎么排查啊，于是我在第一步先安装合适的版本，又切换成了 4.X。
另外也有可能的问题，引入tailwindcss的时候，使用了 这个文档：Install Tailwind CSS with Vite - TailwindCSS中文文档 | TailwindCSS中文网
这里是推荐引入了postcss autoprefixer，其实也可以用，只是还是要走我上面第一步的流程，因为必须引入一个@tailwindcss/postcss。目前是这样。
四、总结
两个文档，都语焉不详……我习惯了……如果升级万万要仔细扒拉文档，并且试错。我的步骤有效，并不能说所有人的都有效，如果还有问题就百度！AI在这种情景下不可信！
安装后的几个包的版本：
