Tailwind CSS v4 Module Resolution Error in Next.js/Cloudflare Deployment
As soon as I upgraded Tailwind CSS from v3 -> v4, I encountered a critical build error. The deployment process completely fails when trying to import Tailwind, i'm importing my repository directly from github
my package.json:
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"autoprefixer": "^10.4.21",
"axios": "^1.8.4",
"clsx": "^2.1.1",
"lucide-react": "^0.483.0",
"next": "15.2.3",
"next-themes": "^0.4.6",
"postcss": "^8.5.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hot-toast": "^2.5.2",
"theme-change": "^2.5.0",
"youtube-transcript": "^1.2.1",
"zod": "^3.24.2"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.0.15",
"@types/node": "^20",
"@types/python-shell": "^0.4.2",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^5.0.9",
"eslint": "^9",
"eslint-config-next": "15.2.3",
"tailwindcss": "^4.0.15",
"typescript": "^5"
}
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"autoprefixer": "^10.4.21",
"axios": "^1.8.4",
"clsx": "^2.1.1",
"lucide-react": "^0.483.0",
"next": "15.2.3",
"next-themes": "^0.4.6",
"postcss": "^8.5.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hot-toast": "^2.5.2",
"theme-change": "^2.5.0",
"youtube-transcript": "^1.2.1",
"zod": "^3.24.2"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.0.15",
"@types/node": "^20",
"@types/python-shell": "^0.4.2",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^5.0.9",
"eslint": "^9",
"eslint-config-next": "15.2.3",
"tailwindcss": "^4.0.15",
"typescript": "^5"
}
1 Reply
the error in logs
? Would you like to continue?
š¤ Using fallback value in non-interactive context: yes
ā [ERROR] Build failed with 1 error:
ā [ERROR] Could not resolve "tailwindcss"
src/app/globals.css:1:8:
1 ā @import "tailwindcss";
āµ ~~~~~~~~~~~~~
The path "." is not currently exported by package "tailwindcss":
node_modules/tailwindcss/package.json:13:13:
13 ā "exports": {
āµ ^
None of the conditions in the package definition ("types", "style", "require", "import") match any of the currently active conditions ("browser", "default", "worker", "workerd"):
node_modules/tailwindcss/package.json:14:9:
14 ā ".": {
āµ ^
Consider enabling the "style" condition if this package expects it to be enabled. You can use "conditions: ['style']" to do that:
node_modules/tailwindcss/package.json:16:6:
16 ā "style": "./index.css",
āµ ~~~~~~~
? Would you like to continue?
š¤ Using fallback value in non-interactive context: yes
ā [ERROR] Build failed with 1 error:
ā [ERROR] Could not resolve "tailwindcss"
src/app/globals.css:1:8:
1 ā @import "tailwindcss";
āµ ~~~~~~~~~~~~~
The path "." is not currently exported by package "tailwindcss":
node_modules/tailwindcss/package.json:13:13:
13 ā "exports": {
āµ ^
None of the conditions in the package definition ("types", "style", "require", "import") match any of the currently active conditions ("browser", "default", "worker", "workerd"):
node_modules/tailwindcss/package.json:14:9:
14 ā ".": {
āµ ^
Consider enabling the "style" condition if this package expects it to be enabled. You can use "conditions: ['style']" to do that:
node_modules/tailwindcss/package.json:16:6:
16 ā "style": "./index.css",
āµ ~~~~~~~