为什么使用 Tailwind 与使用 npm-run-all 的 Create React App 一起使用会导致初始空白屏幕?

vis*_*bam 3 reactjs postcss create-react-app tailwind-css

我正在尝试将 Tailwind 合并到我的 React 应用程序中。所以我按照此处概述的步骤进行操作https://daveceddia.com/tailwind-create-react-app/

当我启动我的应用程序(新创建的演示应用程序)时,它会加载一个空白屏幕。刷新页面后,一切正常。我很困惑为什么初始屏幕是空白页。任何帮助或解释将不胜感激。

现在,如果我在不观看的情况下构建 tailwindcss,那么 React 应用程序会加载正确的 css,但是热重载不适用于 tailwindcss,而且我不会观看它的更改,因此生成的 css 不会更改。

如果我使用 npm-run-all 运行 React 应用程序和 postcss watch 脚本,我最初会看到空白屏幕,如上所述。

如果我使用 npm-run-all 运行 React 应用程序和 postcss watch scrip 并且不包含 tailwind. generated.css 文件,我的 React 应用程序可以正常运行和加载,但我不再有 tailwind css 了。

似乎只有当我包含顺风实用程序时它才会这样做 @tailwind utilities;

Vic*_*tor 6

我遇到了同样的问题,我发现了这个 hack:在脚本中添加睡眠"start": "yarn watch:css & sleep 5 && react-scripts start"