Tailwind Vite plugin in Astro causes type errors in Astro Vite config in Node >=22.12

[JamesJosephFinn]

Hello team Tailwind!

This is my first Tailwind Astro project, so please pardon my lack of familiarity with your process. If anything in this report is out of order, let me know, and I'll fix it straight away.

What version of Tailwind CSS are you using?

v4.1.16

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

Vite, via Astro

What version of Node.js are you using?

Greater than or equal to 22.12

What browser are you using?

N/A

What operating system are you using?

N/A ... node issue, described below

Reproduction URL

https://idx.google.com/tailwind-vite-09606533

N.B. – The above IDX / Firebase Studio environment has been shared with @RobinMalfait 's gmail.

Describe your issue

Firstly, I'm not sure how to get IDX to use a specific version of node, as they utilize Nix, and that's not my jam. So I installed nvm into the environment, and added .nvmrc, which is presently set to node v22.12.0.

In the repro IDX environment (above), run npm run typecheck (which is Astro's wrapper around tsc). The errors in vitest.config.ts and astro.config.ts are what's pertinent to this issue.

The errors will resolve if you run either of the following corrective workflows:

npm rm tailwindcss @tailwindcss/vite
rm -rf node_modules/
rm package-lock.json
npm i

Then, comment out astro.config.ts tailwind stuff before running type checking, like so:

// import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    // plugins: [tailwindcss()],
  },
});

Then run npm run typecheck. You'll see the vitest.config.ts type error inside Astro's Vite config is no longer there, after uninstalling tailwindcss and @tailwindcss/vite.

Something's up with Tailwind and Vite inside Astro!

---

Alternatively, instead of the above corrective workflow, you can downgrade node, like so:

nvm use 22.10.0 --save
rm -rf node_modules/
rm package-lock.json
npm i
npm run typecheck

Unfortunately, I need node greater than or equal to v22.12, so this is not an option!

[thecrypticace]

There are multiple versions of Vite installed in your project:

tw-vite@0.0.1 /Users/jordanpittman/Downloads/download
├─┬ @astrojs/react@4.4.0
│ ├─┬ @vitejs/plugin-react@4.7.0
│ │ └── vite@7.1.12 deduped
│ └── vite@6.4.1
├─┬ @tailwindcss/vite@4.1.16
│ └── vite@7.1.12
├─┬ astro@5.15.1
│ ├── vite@6.4.1
│ └─┬ vitefu@1.1.1
│   └── vite@7.1.12 deduped
└─┬ vitest@4.0.3
  ├─┬ @vitest/mocker@4.0.3
  │ └── vite@7.1.12 deduped
  └── vite@7.1.12 deduped

Type errors like this are almost always indicative of a version mismatch (or, sometimes, the package might be installed in the wrong location — like one level up outside the project). Astro is installing Vite 6 while everything else is relying on Vite 7 — so both versions are installed resulting in mismatched versions.

See
https://github.com/withastro/astro/blob/8ebc0d79756a73741ac01c4a09a864b60bb7207f/packages/astro/package.json#L163

I don't know whoy setting your node version to 22.12 "resolves" the issue but I suspect it's probably resolving to install Vite 6 instead of 7. Our plugin works with either.

If you explicitly pin your Vite version to Vite 6 in your package.json the error should disappear (e.g. run npm install vite@^6).

[JamesJosephFinn]

@thecrypticace thank you for helping out! Yes, pinning Vite v6 does fix the issue, but I'm wondering why uninstalling Tailwind resolves the issue, when I have many other packages also depending upon Vite v7, as you saw. Also, wondering which command you ran to see the various vite dependency trees. That's most helpful, indeed! Thank you again, sir.

[thecrypticace]

I'm wondering why uninstalling Tailwind resolves the issue

Not sure I'm understanding the question. If you remove the Tailwind plugin then you're not gonna be able to include it in the file — which means there's nothing for the types to mismatch against. If you were to pull in any other Vite plugin (that supports Vite 7) and add it to the plugins array the problem will reappear.

Also, wondering which command you ran to see the various vite dependency trees.

npm ls vite

[JamesJosephFinn]

Now I understand. Thank you so much man!