尝试使用Tailwind启动React应用失败

如何解决尝试使用Tailwind启动React应用失败

我正在尝试使用Tailwind开发一个React应用，所以我按照以下步骤进行操作：

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 && react-scripts start","build": "npm run build:css &&  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 && react-scripts start","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 && 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 && 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 && 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中的devDepencies并使用它们。

“ devDependencies”：{ “ autoprefixer”：“ ^ 9.8.6”， “ postcss-cli”：“ ^ 7.1.2”， “ tailwindcss”：“ ^ 1.8.9” }

从nod-modules删除当前已安装的自动前缀为postcss-cli tailwindcss的模块

还请注意，在postcss.config.js中，您需要将autofixer更改为autoprefixer

然后进行npm安装

我在过去的24小时中实现了基本的自动前缀版本10，因此我只是将其发送到绞刑架并降级了。希望这也对您有用