react 19+vite+tailwindcss+shadcn

目录

一、背景描述

二、详细步骤

1.安装tailwindcss

2. shadcn ui 

三、可能出现的报错

四、总结

---

一、背景描述

我昨天在搭建一个 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 这种样式。

如果可以，则进行下面的步骤。

我有另一篇文章写了关于tailwindcss 4 版本的一些问题，可以查看一下，能解决一些遇到的问题。tailwindcss 4 使用的一些注意点-CSDN博客

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在这种情景下不可信！

安装后的几个包的版本：