Next JS 15 - Tailwind 4.0 - Failed Installation

[gawhite]

Completely fresh install using the guide on your Next Specific installation page.

Command Line Error:
Import trace for requested module:
./app/globals.css
⨯ ./app/globals.css
Module not found: Can't resolve 'tailwindcss'

https://nextjs.org/docs/messages/module-not-found

Localhost:3000 error:
Build Error

Next.js (15.1.6)
Failed to compile

./app/globals.css
Module not found: Can't resolve 'tailwindcss'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/globals.css

posts.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

globals.css
@import "tailwindcss";
@import "postcss";

:root {
--background: #ffffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@tailwindcss/postcss": "^4.0.0",
"next": "15.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5"
}
}

I do notice the devDependencies is not showing the new version??

[wongjn]

It could be that you said Yes to the "Would you like to use Tailwind CSS?" question. This would then install Tailwind v3. You could consider running:

npm install tailwindcss@4

To force it to v4.

[gawhite]

You are correct! Thank You.

It appears that the command listed on the Installation page did in fact install the 3.1.x version as opposed to 4.0 if you said yes to using Tailwind.
I made the assumption that it would us the latest ( Version 4.0.1). It did not

This was successful:
npx create-next-app@latest my-project --typescript --eslint --app
cd my-project
✔ Would you like to use Tailwind CSS? … No / Yes - ***** No *******
✔ Would you like your code inside a src/ directory? … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
Creating a new Next.js app in /Users/geoffreywhite/Developer/windsurf/my-project.

Using npm.

Initializing project with template: app

Installing dependencies:

• react
• react-dom
• next

Installing devDependencies:

• typescript
• @types/node
• @types/react
• @types/react-dom
• eslint
• eslint-config-next
• @eslint/eslintrc

added 301 packages, and audited 302 packages in 5s

124 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-project at /Users/Developer/windsurf/my-project

Here I added the @4 to force version 4 as you suggested
npm install tailwindcss@4 @tailwindcss/postcss postcss

added 11 packages, changed 1 package, and audited 313 packages in 811ms

128 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

npm run dev

[email protected] dev
next dev

▲ Next.js 15.1.6

• Local: http://localhost:3000
• Network: http://192.168.80.79:3000

✓ Starting...
✓ Ready in 1021ms
○ Compiling / ...
(node:64951) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
✓ Compiled / in 1986ms (674 modules)

The page rendered correctly.