'Cant' build Tailwind CSS

So I'm trying out Taiwlwind CSS for the first time and I'm following a tutorial. I'm sure I've followed the tutorial to the tee and we haven't even gotten anywhere and I can't seem to build, I always get a bunch of errors.

Is there something that I'm doing wrong possibly?

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"
  }
}

The errors I get

� 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! [email protected] build:css: `tailwindcss build src/style.css -o dist/style.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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...

The complete log

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild:css', 'build:css', 'postbuild:css' ]
5 info lifecycle [email protected]~prebuild:css: [email protected]
6 info lifecycle [email protected]~build:css: [email protected]
7 verbose lifecycle [email protected]~build:css: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build:css: CWD: C:\Users\PAVILION\Desktop\Prac\Tailwind-learn
10 silly lifecycle [email protected]~build:css: Args: [ '/d /s /c',
10 silly lifecycle   'tailwindcss build src/style.css -o dist/style.css' ]
11 silly lifecycle [email protected]~build:css: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build:css: Failed to exec build:css script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build:css: `tailwindcss build src/style.css -o dist/style.css`
22 error Exit status 1
23 error Failed at the [email protected] 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 ]

Solution 1:^[1]

The problem is that you're using node v10.16.0 and Array.flatMap() is only available after node v11.

If you check the docs, you can see that Tailwind CSS v2.0 no longer supports node v8 or v10 and to build your CSS you'll need to make sure you're running node v12.13.0 or higher.

You can download the latest version of Node.js from their site or even better, you could use a Node version manager, like nvm to manage multiple active Node versions.

Solution 2:^[2]

The first thing that differs in our code is in the "scripts" for package.json. Try tailwind instead of tailwindcss. NPM might not be working properly. However, you can use Yarn to install and build Tailwind CSS with of course, tailwind not tailwindcss.

Solution 3:^[3]

May I ask which framework/tool you are using TailwindCSS in? If you are not using any framework/tool, you can refer to the official TailwindCSS installation docs for further clarification. You can also install tailwind by using it without PostCSS or via CDN. I can infer that your build script is not compiling correctly so maybe use a compiler like webpack or postcss-cli.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Michael Emil Rivera

'Cant' build Tailwind CSS

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]