在将 tailwindcss 应用到我的 React 应用程序后，我在执行 "yarn start" 时遇到问题

Question

我在将 tailwindcss 和 postcss 应用于我的 React 应用程序（使用 create-react-app 创建）时遇到问题

我在 package.json 中更改 scripts，这是我的 package.json 现在看喜欢：

{
  "name": "octopus-one",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "build:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css -w",
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "node-sass": "^4.14.1",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.4.6"
  }
}

之后，我运行 yarn start。但这就是我得到的全部：

C:\Dev\octopus-one>yarn start
yarn run v1.21.1
$ npm run watch:css && react-scripts start

octopus-one@0.1.0 watch:css C:\Dev\octopus-one
postcss src/styles/index.tailwind.css -o src/styles/index.css -w

_

开发服务器默认create-react-app不运行ning.

一切正常，没有任何错误。就像 npm run watch:css 总是运行ning 和
react-scripts start 不会运行宁。
看起来我在 package.json 中犯了一个错误，但我不知道我应该怎么做。
我只想 react-scripts start 运行在完成 npm run watch:css、
之后这样我就可以像往常一样访问开发服务器（在 localhost: 3000 中）。

我还是 react 的新手，这是我第一次使用 tailwindcss 作为我的 React 应用程序。
希望你能帮忙，
谢谢。

Answer 1

我终于解决了这个问题，我会在上面回答我自己的问题。

我一次使用 concurrently 到运行多个命令。

所以我安装了：

yarn add concurrently -D

然后我将 package.json 中的 script 更改为：

"scripts": {
    "build:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css -w",
    "start": "concurrently \"npm run watch:css\" \"react-scripts start\"",
    "build": "concurrently  \"npm run build:css\" \"react-scripts build\"",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

终于可以在运行react-scripts start

之前运行 npm run watch:css

在将 tailwindcss 应用到我的 React 应用程序后，我在执行 "yarn start" 时遇到问题

I have problems when doing "yarn start" after applying tailwindcss to my react application

javascript

css

reactjs

npm

tailwind-css