【问题标题】:How to upgrade from tailwindcss 2 to 3 and create-react-app 4.0.3 to 5.0.0 (due to Post CSS 8 )如何从 tailwindcss 2 升级到 3 和 create-react-app 4.0.3 到 5.0.0(由于 Post CSS 8)
【发布时间】:2022-01-26 11:38:54
【问题描述】:

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

官方 Create-React-App 文档说“在大多数情况下,在 package.json 中碰撞 react-scripts 版本并在此文件夹中运行 npm install 就足够了,但最好查阅更新日志以了解潜在的重大更改。"

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

我按照这些步骤操作,并在尝试运行 npm run start 时收到一条巨大的错误消息

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

但是,在我这样做之前,我想问:从 tailwind 2 升级到 3 以及从 create-react-app 从 4.0.3 升级到 5.0.0 的推荐解决方案是什么(因为我的理解是你需要两者都做以使顺风工作)。其他人是如何解决上述问题的?

【问题讨论】:

  • 我也可以报告在从头开始设置 CRA 5/Tailwind 3 时遇到问题。仍在故障排除。好奇您是否尝试创建新项目并且它是否对您有用?我正在使用 Linux、Node 17.3 和 Typescript。

标签: reactjs npm create-react-app tailwind-css


【解决方案1】:

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

然后卸载craco

最后用命令更新顺风

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-18
    • 2018-07-21
    • 2018-12-18
    • 1970-01-01
    • 2022-01-21
    • 1970-01-01
    • 2014-02-27
    相关资源
    最近更新 更多