如何从 tailwindcss 2 升级到 3 以及 create-react-app 4.0.3 升级到 5.0.0 （由于 Post CSS 8 ）

Question

我通过 create-react-app 4.0.3 创建了一个项目，它使用 tailwindcss 2。我只是尝试将项目升级到 tailwindcss 3，但很快就遇到了麻烦，因为 tailwindcss 3 依赖于 Post CSS 8，而 create 不支持 Post CSS 8 -react-app 4.0.3 ，所以我还需要升级到 create-react-app 5.0.0

\n

官方的 Create-React-App 文档说：“在大多数情况下，将react-scripts版本引入此文件夹package.json并npm install在该文件夹中运行应该足够了，但\xe2\x80\x99s最好查阅变更日志以了解潜在的重大更改。 ”

\n

官方的 Tailwind 升级指南说“使用 npm 更新 Tailwind，以及 PostCSS 和 autoprefixer ”，并添加了一些小的更改tailwind.config.js

\n

我按照这个步骤操作，但在尝试运行时出现了巨大的错误消息npm run start

\n

我认为最终从新的 5.0.0 create-react-app 安装中设置项目可能会更容易，我在顶部安装了 tailwind 3，而不是尝试修复升级引起的所有问题。

\n

然而，在我这样做之前，我想问：从 tailwind 2 升级到 3 以及从 create-react-app 从 4.0.3 升级到 5.0.0 的推荐解决方案是什么（因为我的理解是你需要同时执行这两项操作）使顺风发挥作用）。其他人是如何解决上述问题的？

\n

Answer 1

首先需要将react-scripts更新到5.0.0版本

然后卸载craco

最后使用命令更新 tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

您还可以按照https://tailwindcss.com/docs/upgrade-guide的官方指南更新新的颜色名称并更新 tailwind.config.js 文件

现在您可以运行命令npm run start来查看更改，并且在控制台中您可以看到新的构建过程