[4.1.4] Getting parser error : Cannot convert undefined or null to object

[FLCN-16]

What version of Tailwind CSS are you using?

4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.2.6

What version of Node.js are you using?

v22.14.1

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

Reproduction URL

Not Deployed

Describe your issue

Getting below issue when running the application

@phoenix/panel:dev: Plugin: @tailwindcss/vite:generate:serve
@phoenix/panel:dev: File: /Users/flcn-16/something/apps/panel/src/index.css
@phoenix/panel:dev: at M.generate (file:///Users/flcn-16/something/node_modules/.pnpm/@tailwindcss[email protected]_vite@6.2.6_@types[email protected]_jiti@[email protected]_s_1ee1951df1de3fb2e272ed9875e003cd/node_modules/@tailwindcss/vite/dist/index.mjs:336:24)

[wongjn]

Please consider providing a git repo that reproduces the issue so that we can troubleshoot please.

[banqinghe]

I encountered this issue when using the React Router template (https://github.com/remix-run/react-router-templates/tree/main/default). It caused an error with pnpm 8, but it works after switching to pnpm 10.

[bobvork]

I ran into the same problem with my sveltekit project. It started for when a Github action failed, and the proposed solution was to rm -rf node_modules && rm package-lock.json, so that upgraded a bunch of dependencies at the same time. However since the error does mention tailwindcss it's worth looking into.

I've created a basic repository, of a sveltekit project generated with npx sv create my-app. running npm run dev and trying to load the page should result in the error.

Let me know if I can do anything else to help debug this.

[wongjn]

You have different versions of Tailwind CSS packages in your probject:

$ npm ls tailwindcss
[email protected] /home/justin/projects/foo-bug-reproduce
├─┬ @tailwindcss/[email protected]
│ └── [email protected] deduped
├─┬ @tailwindcss/[email protected]
│ ├─┬ @tailwindcss/[email protected]
│ │ └── [email protected]
│ └── [email protected]
└── [email protected]

The packages should all be the same version. Updating them to all be the same version should fix your error:

$ npm install @tailwindcss/vite@latest
$ npm install tailwindcss@latest --save-dev

$ npm ls tailwindcss
[email protected] /home/justin/projects/foo-bug-reproduce
├─┬ @tailwindcss/[email protected]
│ └── [email protected] deduped
├─┬ @tailwindcss/[email protected]
│ ├─┬ @tailwindcss/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

[bobvork]

That does indeed fix my problem, thank you! Not too surprised the problem was between my keyboard and my chair.