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

Posted 2023-03-06

【中文标题】尝试使用 Tailwind 启动 React 应用程序失败

【英文标题】：Attempt to launch React app with Tailwind fails

【发布时间】：2021-01-02 13:05:39

【问题描述】：

我正在尝试使用 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",
    "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"
  ,
  "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 ]

我不知道我错过了哪一步。

【问题讨论】：

可能不是问题的全部原因，但您应该要求 autoprefixer 而不是 autofixer。

你修好了吗？

@Junaid 我找不到问题的根源，但我从头开始安装和设置项目，这次成功了。从来不知道问题出在哪里

【参考方案1】：

更改 package.js 中的 devDepencies 并使用它们。

“开发依赖”： "自动前缀": "^9.8.6", "postcss-cli": "^7.1.2", "tailwindcss": "^1.8.9"

从 nod-modules 中删除当前安装的模块，即 autoprefixer、postcss-cli tailwindcss

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

然后执行 npm 安装

在过去的 24 小时内，我意识到 autoprefixer 版本 10 正在运行，所以我只是将其发送到绞刑架并降级。希望这也适用于你的队友