无法构建 Tailwind CSS

Posted 2023-03-07

【中文标题】无法构建 Tailwind CSS

【英文标题】：Cant' build Tailwind CSS

【发布时间】：2021-04-10 09:19:52

【问题描述】：

所以我是第一次尝试 Taiwlwind CSS，我正在学习一个教程。我确定我已经按照教程进行了 T 恤，但我们什至没有到达任何地方，而且我似乎无法构建，我总是遇到一堆错误。

我可能做错了什么吗？

package.json

  "name": "Tailwind-learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "build:css": "tailwindcss build src/style.css -o dist/style.css"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": 
    "autoprefixer": "^10.1.0",
    "postcss": "^8.2.2",
    "tailwindcss": "^2.0.2"
  

我得到的错误

� TypeError: Object.entries(...).flatMap is not a function
    at flattenColorPalette (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\tailwindcss\lib\util\flattenColorPalette.js:8:83)
    at C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\tailwindcss\lib\plugins\divideColor.js:27:53
    at plugins.forEach.plugin (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\tailwindcss\lib\util\processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\tailwindcss\lib\util\processPlugins.js:63:11)
    at C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\tailwindcss\lib\processTailwindFeatures.js:64:54
    at LazyResult.runOnRoot (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\postcss\lib\lazy-result.js:303:16)
    at LazyResult.runAsync (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\postcss\lib\lazy-result.js:355:26)
    at LazyResult.async (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\postcss\lib\lazy-result.js:205:30)
    at LazyResult.then (C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\postcss\lib\lazy-result.js:190:17)

Waiting for the debugger to disconnect...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Tailwind-learn@1.0.0 build:css: `tailwindcss build src/style.css -o dist/style.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Tailwind-learn@1.0.0 build:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\PAVILION\AppData\Roaming\npm-cache\_logs\2021-01-04T03_03_14_233Z-debug.log
Waiting for the debugger to disconnect...

完整的日志

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build:css' ]
2 info using npm@6.9.0
3 info using node@v10.16.0
4 verbose run-script [ 'prebuild:css', 'build:css', 'postbuild:css' ]
5 info lifecycle Tailwind-learn@1.0.0~prebuild:css: Tailwind-learn@1.0.0
6 info lifecycle Tailwind-learn@1.0.0~build:css: Tailwind-learn@1.0.0
7 verbose lifecycle Tailwind-learn@1.0.0~build:css: unsafe-perm in lifecycle true
8 verbose lifecycle Tailwind-learn@1.0.0~build:css: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\PAVILION\Desktop\Prac\Tailwind-learn\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Hewlett-Packard\SimplePass\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files\dotnet\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Brackets\command;C:\Program Files\nodejs\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\dotnet\;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Users\PAVILION\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\PAVILION\AppData\Local\Programs\Python\Python37\;C:\Users\PAVILION\AppData\Local\Programs\Python\Python36;C:\Users\PAVILION\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\PAVILION\.dotnet\tools;C:\Program Files\heroku\bin
9 verbose lifecycle Tailwind-learn@1.0.0~build:css: CWD: C:\Users\PAVILION\Desktop\Prac\Tailwind-learn
10 silly lifecycle Tailwind-learn@1.0.0~build:css: Args: [ '/d /s /c',
10 silly lifecycle   'tailwindcss build src/style.css -o dist/style.css' ]
11 silly lifecycle Tailwind-learn@1.0.0~build:css: Returned: code: 1  signal: null
12 info lifecycle Tailwind-learn@1.0.0~build:css: Failed to exec build:css script
13 verbose stack Error: Tailwind-learn@1.0.0 build:css: `tailwindcss build src/style.css -o dist/style.css`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\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 Tailwind-learn@1.0.0
15 verbose cwd C:\Users\PAVILION\Desktop\Prac\Tailwind-learn
16 verbose Windows_NT 6.3.9600
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:css"
18 verbose node v10.16.0
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error Tailwind-learn@1.0.0 build:css: `tailwindcss build src/style.css -o dist/style.css`
22 error Exit status 1
23 error Failed at the Tailwind-learn@1.0.0 build:css script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

【参考方案1】：

我们的代码中的第一个不同之处在于 package.json 的“脚本”。尝试tailwind 而不是tailwindcss。 NPM 可能无法正常工作。但是，您当然可以使用 Yarn 安装和构建 Tailwind CSS，tailwind 而不是 tailwindcss。

【讨论】：

还是没有运气，先生，您可以从日志或错误中推断出什么吗？

当你在没有 PostCSS 的情况下构建时，它是 tailwindcss build，而不是 tailwind build，所以这很好。

【参考方案2】：

请问您在哪个框架/工具中使用 TailwindCSS？如果您没有使用任何框架/工具，您可以参考官方 TailwindCSS installation docs 进行进一步说明。您也可以通过using it without PostCSS 或via CDN 安装tailwind。我可以推断出你的构建脚本没有正确编译，所以可能使用 webpack 或 postcss-cli 之类的编译器。

【参考方案3】：

问题是您使用的是node v10.16.0，而Array.flatMap() 仅在node v11 之后可用。

如果您 check the docs，您会看到 Tailwind CSS v2.0 不再支持 node v8 或 v10，并且要构建您的 CSS，您需要确保您运行的是 node v12.13.0 或更高版本。

您可以从 their site 下载最新版本的 Node.js，或者更好的是，您可以使用 Node 版本管理器，例如 nvm 来管理多个活动的 Node 版本。