CODEWITHSUNDEEP
javascriptcssreactjsnpmtailwind-css
Kevin
Kevin

Reputation: 443

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

I have a problem when applying tailwindcss with postcss to my React Application (which was created using create-react-app)

I was change scripts in package.json, here is my package.json now look like:

{
  "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"
  }
}

after that, I run the yarn start. but this is all I got:

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

[email protected] watch:css C:\Dev\octopus-one
postcss src/styles/index.tailwind.css -o src/styles/index.css -w

_

development server default create-react-app does not running.

everything is fine, no errors whatsoever. it's just like it looks like a npm run watch:css always running and
react-scripts start doesn't running.
it looks like I made a mistake in package.json but I don't know what I should do.
I just wanna react-scripts start running after completing npm run watch:css,
so that I can access the development server as usual ( in localhost: 3000).


I still new for react and this is first time I use tailwindcss for my react application.
hope you can help,
thanks.

Upvotes: 0

Views: 1401

Answers (1)

Kevin
Kevin

Reputation: 443

finally I was able to solve this problem and I will answer my own question above.

I use concurrently to run more than one command at a time.

so i installed:

yarn add concurrently -D


then I change script in my package.json to this:

"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"
  },

and finally I can run npm run watch:css before running react-scripts start

Upvotes: 2

Related Questions