Error: ‘Failed to load tailwindcss as a PostCSS plugin’ in Next.js

[ygdani89]

Error evaluating Node.js code
Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

Hi everyone, the only way to fix this is to revert to the previous version of Tailwind. Run this command, and the problem will be solved: npm i -D tailwindcss@3 postcss

[ygdani89]

npm i -D tailwindcss@3 postcss 😎

[RobinMalfait]

Hey!

The error means that you are using tailwindcss in a PostCSS configuration instead of @tailwindcss/postcss. Make sure you follow in the instruction guide here: https://tailwindcss.com/docs/installation/framework-guides/nextjs

If this doesn't work for you, try to share a minimal reproduction repo we can clone so we can take a look.

[Namankataria01]

I"m having the same issue

[Namankataria01]

"dependencies": {
"@radix-ui/react-accordion": "^1.2.11",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-slot": "^1.2.3",
"accordion": "^3.0.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.23.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.525.0",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"shadcn": "^2.7.0",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
"-": "^0.0.1",
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.1.11",
"@types/leaflet": "^1.9.19",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"force": "^0.0.3",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",
"tw-animate-css": "^1.3.4",
"typescript": "^5"
}
}

const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

[rozsazoltan]

Related:

• Cannot build frontend using TailwindCSS with PostCSS
• Tailwind CSS v4: more packages and new Vite support