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

[kitajchuk]

I'm getting an issue trying to upgrade to tailwindcss@4.3.3 on next@16.0.11. My goal was to be able to use scrollbar-* utility classes. Worth noting that for our Storybook implementation using version 4.3.3 works fine with Vite and the scrollbar-* classes are applied as expected.

Here's my Next.js declaration in my yarn.lock:

next@~16.0.0:
  version "16.0.11"
  resolved "https://registry.yarnpkg.com/next/-/next-16.0.11.tgz#1934177e25b45d961a13d93347181dbb378b6978"
  integrity sha512-Xlo2aFWaoypPzXr4PFLSNmxrzNptlp+hgxnG9Y2THYvHrvmXIuHUyNAWO6Q+F4rm4/bmTOukprXEyF/j4qsC2A==
  dependencies:
    "@next/env" "16.0.11"
    "@swc/helpers" "0.5.15"
    caniuse-lite "^1.0.30001579"
    postcss "8.4.31"
    styled-jsx "5.1.6"
  optionalDependencies:
    "@next/swc-darwin-arm64" "16.0.11"
    "@next/swc-darwin-x64" "16.0.11"
    "@next/swc-linux-arm64-gnu" "16.0.11"
    "@next/swc-linux-arm64-musl" "16.0.11"
    "@next/swc-linux-x64-gnu" "16.0.11"
    "@next/swc-linux-x64-musl" "16.0.11"
    "@next/swc-win32-arm64-msvc" "16.0.11"
    "@next/swc-win32-x64-msvc" "16.0.11"
    sharp "^0.34.4"

I've installed:

• tailwindcss@4.3.3
• @tailwindcss/postcss@4.3.3

My postcss.config.mjs looks like this:

import path from "path";

const config = {
  plugins: {
    "@tailwindcss/postcss": {
      // resolve the base path to the root of the monorepo
      base: path.resolve(process.cwd(), "../"),
    },
  },
};

export default config;

When I run the Next.js app I end up with this error (real user path omitted):

---------------------------
Failed to write app endpoint /(public)/(index)/page

Caused by:
- [project]/web/app/global.css [app-client] (css)
- reading file /********/.codegraph/daemon.sock
- Operation not supported on socket (os error 102)

Debug info:
- Execution of get_written_endpoint_with_issues_operation failed
- Execution of endpoint_write_to_disk failed
- Execution of <AppEndpoint as Endpoint>::output failed
- Failed to write app endpoint /(public)/(index)/page
- Execution of AppEndpoint::output failed
- Execution of AppProject::app_module_graphs failed
- Execution of *<AppEndpoint as Endpoint>::additional_entries failed
- Execution of *ModuleGraph::from_graphs failed
- Execution of SingleModuleGraph::new_with_entries_visited_intern failed
- [project]/web/app/global.css [app-client] (css)
- Execution of primary_chunkable_referenced_modules failed
- Execution of <CssModuleAsset as Module>::references failed
- Execution of parse_css failed
- Execution of <PostCssTransformedAsset as Asset>::content failed
- Execution of PostCssTransformedAsset::process failed
- Execution of evaluate_webpack_loader failed
- Execution of <DiskFileSystem as FileSystem>::read failed
- reading file /********/.codegraph/daemon.sock
- Operation not supported on socket (os error 102)

Any insight here would be very helpful, thanks.

[wongjn]

Try adding .codegraph a gitignore

[kitajchuk]

I suppose I could try dropping the postcss config and using @source. I'll give that a try.
https://tailwindcss.com/docs/functions-and-directives#source-directive

[kitajchuk]

@wongjn it's ignored globally but not locally. Will try it out as well.

[kitajchuk]

I've validated the @source directive works for us. Should have used that in the first place but just hadn't stumbled onto it...

Will test with the upgraded to 4.3.3 and if that works sorry for the ping 😅

[kitajchuk]

Okay I have validated that switching to the @source directive is the correct way to handle files otherwise not scanned by tailwind and this works with version 4.3.3 and scrollbar-* classes are working as I would expect.

Sorry to bother.