Reputation: 127
I've configured tailwind.css to my react project and edit the react scripts according to
"scripts": {
"build:css": "postcss src/styles/index.css -o src/styles/tailwind.css",
"watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch",
"react-script:start": "timeout <5> && react-scripts start",
"start": "run-p watch:css react-scripts:start",
"build": "run-s build:css react-scripts:build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
also the respective packages were installed without any error. I'm annexing the package.json
{
"name": "myblog",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"build:css": "postcss src/styles/index.css -o src/styles/tailwind.css",
"watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch",
"react-script:start": "timeout <5> && react-scripts start",
"start": "run-p watch:css react-scripts:start",
"build": "run-s build:css react-scripts:build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"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": "^10.4.4",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.12",
"postcss-cli": "^9.1.0",
"tailwindcss": "^3.0.23"
}
}
Then I continuously got the error by showing "Task not found"
the error displayed in the terminal
What I have tried so far
Upvotes: 3
Views: 822
Reputation: 13357
You have a spelling error in your scripts
section:
"start": "run-p watch:css react-scripts:start"
is looking for "react-scripts:" (plural, with an "s"), but your script name does not contain that "s" ("react-script:").
"scripts": {
...
"react-script:start": "timeout <5> && react-scripts start",
^--- Does not contain the "s" - change this to: "react-scripts:start": "timeout <5> && react-scripts start",
"start": "run-p watch:css react-scripts:start",
Looking for react-scripts with an s --^
},
Upvotes: 1