Блог

Я пытаюсь разработать приложение React с использованием Tailwind, поэтому для этого я выполняю следующие шаги:

 npx create-react-app cinetogo

cd cinetogo

npm i --save-dev autoprefixer postcss-cli tailwindcss

npx tailwind init tailwind.js

Create file 'postcss.config.js' in 'src' and add:

---
const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autofixer')
    ]
}
---

Create directory 'src/css' and file 'tailwind.css' and add:

---
@tailwind base;
@tailwind components;
@tailwind utilities;
---

Edit 'package.json':

---
 "scripts": {
    "start": "npm run watch:css amp;amp; react-scripts start",
    "build": "npm run build:css amp;amp;  react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/tailwind.css -o src/css/main.css",
    "watch:css": "postcss src/css/tailwind.css -o src/css/main.css"
  },
---

npm start
  

Это мой postcss.config.js :

 const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autofixer')
    ]
}
  

Это мой tailwind.css :

 @tailwind base;
@tailwind components;
@tailwind utilities;
  

Это мой package,json :

 {
  "name": "cinetogo_frontend",
  "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",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "npm run watch:css amp;amp; react-scripts start",
    "build": "npm run build:css amp;amp;  react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/tailwind.css -o src/css/main.css",
    "watch:css": "postcss src/css/tailwind.css -o src/css/main.css"
  },
  "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.8.6",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.10"
  }
}
  

Но когда я запускаю npm start , я получаю сообщение об ошибке со следующим журналом:

 0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@6.14.8
3 info using node@v10.16.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle cinetogo_frontend@0.1.0~prestart: cinetogo_frontend@0.1.0
6 info lifecycle cinetogo_frontend@0.1.0~start: cinetogo_frontend@0.1.0
7 verbose lifecycle cinetogo_frontend@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle cinetogo_frontend@0.1.0~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/hugovillalobos/Documents/Code/cinetogoproject/frontend/cinetogo_frontend/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/Users/hugovillalobos/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle cinetogo_frontend@0.1.0~start: CWD: /Users/hugovillalobos/Documents/Code/cinetogoproject/frontend/cinetogo_frontend
10 silly lifecycle cinetogo_frontend@0.1.0~start: Args: [ '-c', 'npm run watch:css amp;amp; react-scripts start' ]
11 silly lifecycle cinetogo_frontend@0.1.0~start: Returned: code: 1  signal: null
12 info lifecycle cinetogo_frontend@0.1.0~start: Failed to exec start script
13 verbose stack Error: cinetogo_frontend@0.1.0 start: `npm run watch:css amp;amp; react-scripts start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid cinetogo_frontend@0.1.0
15 verbose cwd /Users/hugovillalobos/Documents/Code/cinetogoproject/frontend/cinetogo_frontend
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
18 verbose node v10.16.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error cinetogo_frontend@0.1.0 start: `npm run watch:css amp;amp; react-scripts start`
22 error Exit status 1
23 error Failed at the cinetogo_frontend@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
  

Я не знаю, какой шаг я пропускаю.

измените настройки в вашем package.js и используйте эти.

«devDependencies»: { «autoprefixer»: «^ 9.8.6», «postcss-cli»: «^ 7.1.2», «tailwindcss»: «^ 1.8.9» }

удалите установленные в данный момент модули, которые являются autoprefixer, postcss-cli tailwindcss из nod-модулей

также обратите внимание, что в вашем postcss.config.js вам необходимо изменить autofixer на autoprefixer

затем выполните установку npm

В ОСНОВНОМ За ПОСЛЕДНИЕ 24 ЧАСА я ПОНЯЛ, ЧТО версия autoprefixer 10 проигрывается, поэтому я просто отправил ее на виселицу и понизил рейтинг. Надеюсь, это также сработает для вас, приятель