如何使用 Tailwind Watch 启动 React 应用程序

Question

这是我在 package.json 中的脚本。我使用 create-react-app 创建了一个项目，并想引入 tailwind。

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts build",
"start": "npm run watch:css && react-scripts start",

当我运行yarn start 时，应用程序未启动。看来是停在值班时间了。我怎样才能拥有顺风手表并启动应用程序？

Answer 1

所以基本上发生的事情是，当您运行两个脚本时，它会等待第一个脚本返回一些内容。如果您之前启动开发服务器然后运行watch:css它就会起作用，因为开发服务器将启动，然后构建 tailwind 的脚本将监视更改。如果您像这样安排脚本，它应该可以工作：

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css", "watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css", "build": "react-scripts build && npm run build:css", "start": "react-scripts start && npm run watch:css",

如果这没有帮助你可以使用concurrently包：

https://www.npmjs.com/package/concurrently

或者你可以单独运行它们。react-script start在一个控制台和watch:css第二个控制台中，则第一个控制台将在进行任何更改后重新加载styles.css，第二个控制台将styles.css在进行任何更改后重建tailwind.css