astro

[seanperez-xyz]

following the docs https://tailwindcss.com/docs/installation/framework-guides/astro (I am not including the tailwind astro plugin)

// @ts-check
import { defineConfig } from "astro/config";

import cloudflare from "@astrojs/cloudflare";
import tailwindcss from "@tailwindcss/vite";
import partytown from "@astrojs/partytown";
import qwikdev from "@qwikdev/astro";

// https://astro.build/config
export default defineConfig({
  adapter: cloudflare(),
  integrations: [qwikdev(), partytown()],
  vite: { plugins: [tailwindcss()] },
});

its working in the sense of I can use it but there is an error in the config.mjs vite plugins

  vite: { plugins: [tailwindcss()] },

Type 'Plugin<any>[]' is not assignable to type 'PluginOption'.
Type 'Plugin<any>[]' is not assignable to type 'PluginOption[]'.
Type 'Plugin<any>' is not assignable to type 'PluginOption'.
Type 'import("path/to/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").Plugin<any>'.
Types of property 'apply' are incompatible.
Type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' is not assignable to type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined'.
Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
Type '(this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean' is not assignable to type '(this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean'.
Types of parameters 'config' and 'config' are incompatible.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").UserConfig'.
Types of property 'plugins' are incompatible.
Type 'import("path/to/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").PluginOption[]'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").PluginOption'.
Type 'Plugin<any>' is not assignable to type 'PluginOption'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").Plugin<any>'.
Types of property 'apply' are incompatible.
Type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' is not assignable to type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined'.

[colus001]

Same for solid-start. It shows type error but works fine.

[gurpreet-fe]

Same for tailwindcss plugin. Is there a fix to this?

[anmpog]

I am also getting this error attempting to migrate from v3 to v4. My code editor shows a typescript error, but my site is building/running locally.

[fedetibaldo]

I ran into the same issue after turning my Vite + TailwindCSS website into an Astro project. In my case, even after removing Vite as a direct dependency, NPM kept two versions of Vite installed (6.x, used by astro, and 5.x used by @tailwindcss/vite). That's, I assume, what causes the type error.

> npm why vite

vite@6.2.1
node_modules/astro/node_modules/vite
  vite@"^6.2.0" from astro@5.4.3
  node_modules/astro
    astro@"^5.4.3" from website@1.0.0
    packages/website
      website@1.0.0
      node_modules/website
        workspace packages/website from the root project

vite@5.4.11 peer
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.0.12
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from website@1.0.0
    packages/website
      website@1.0.0
      node_modules/website
        workspace packages/website from the root project
  peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from vitefu@1.0.6
  node_modules/vitefu
    vitefu@"^1.0.6" from astro@5.4.3
    node_modules/astro
      astro@"^5.4.3" from website@1.0.0
      packages/website
        website@1.0.0
        node_modules/website
          workspace packages/website from the root project

To fix it, I removed all the top-level packages that resolved to vite@5 (in my case, both astro and @tailwindcss/vite) and reinstalled them starting from astro. After reinstalling @tailwindcss/vite, the problem went away, and now I have only one version of Vite installed.

> npm why vite

vite@6.2.1
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.0.12
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from website@1.0.0
    packages/website
      website@1.0.0
      node_modules/website
        workspace packages/website from the root project
  vite@"^6.2.0" from astro@5.4.3
  node_modules/astro
    astro@"^5.4.3" from website@1.0.0
    packages/website
      website@1.0.0
      node_modules/website
        workspace packages/website from the root project
  peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from vitefu@1.0.6
  node_modules/vitefu
    vitefu@"^1.0.6" from astro@5.4.3
    node_modules/astro
      astro@"^5.4.3" from website@1.0.0
      packages/website
        website@1.0.0
        node_modules/website
          workspace packages/website from the root project

I hope my troubleshooting will help you. Cheers.

[aczw]

This worked perfectly. For me I also had to remove and reinstall @astrojs/react and @astrojs/vercel. Thank you so much!

[bennycode]

I ran into the same issue after turning my Vite + TailwindCSS website into an Astro project. In my case, even after removing Vite as a direct dependency, NPM kept two versions of Vite installed (6.x, used by astro, and 5.x used by @tailwindcss/vite). That's, I assume, what causes the type error.

Thanks for the hint! I checked with npm why vite which versions of Vite have been installed and noticed that I had Vite v4, v5 and v6 references in my package-lock.json file. This caused TypeScript type incompatibilities. I solved them by updating my packages using npm update --save which resolved the Type 'Plugin<any>[]' is not assignable to type 'PluginOption' error for me.

[phattranky]

Thank you, That's work for me.

pnpm remove astro
pnpm remove @tailwindcss/vite

pnpm add astro
pnpm add @tailwindcss/vite

[mciszczon]

I also ran into this error. In my case the conflict was between @astrojs/solid-js and Vite version that comes with solid-devtools:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: revexcel-www@0.0.1
npm ERR! Found: vite@6.3.2
npm ERR! node_modules/vite
npm ERR!   vite@"^6.2.6" from @astrojs/solid-js@5.0.8
npm ERR!   node_modules/@astrojs/solid-js
npm ERR!     @astrojs/solid-js@"^5.0.8" from the root project
npm ERR!   peer vite@"^5.2.0 || ^6" from @tailwindcss/vite@4.1.4
npm ERR!   node_modules/@tailwindcss/vite
npm ERR!     dev @tailwindcss/vite@"^4.1.4" from the root project
npm ERR!   1 more (astro)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev solid-devtools@"^0.30.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite@4.5.13
npm ERR! node_modules/vite
npm ERR!   peerOptional vite@"^2.2.3 || ^3.0.0 || ^4.0.0 || ^5.0.0" from solid-devtools@0.30.1
npm ERR!   node_modules/solid-devtools
npm ERR!     dev solid-devtools@"^0.30.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

In my case I just decided to get rid of the dev tools, since I don't need them anyway (I've got a fairly simple and uncomplicated project).

Here are my deps for reference (with devtools already removed):

{
	"dependencies": {
	    "@astrojs/check": "^0.9.4",
	    "@astrojs/solid-js": "^5.0.8",
	    "@iconify-json/simple-icons": "^1.2.31",
	    "accessible-astro-components": "^4.1.0",
	    "astro": "^5.6.1",
	    "astro-icon": "^1.1.5",
	    "solid-js": "^1.9.5",
	    "tailwindcss": "^4.1.3",
	    "typescript": "^5.8.3"
	  },
	  "devDependencies": {
	    "@iconify-icon/solid": "^2.3.0",
	    "@iconify-json/solar": "^1.2.2",
	    "@rollup/plugin-yaml": "^4.1.2",
	    "@tailwindcss/forms": "^0.5.10",
	    "@tailwindcss/typography": "^0.5.16",
	    "@tailwindcss/vite": "^4.1.4",
	    "@typescript-eslint/parser": "^8.29.1",
	    "eslint": "^9.24.0",
	    "eslint-config-prettier": "^10.1.1",
	    "eslint-plugin-astro": "^1.3.1",
	    "eslint-plugin-jsx-a11y": "^6.10.2",
	    "husky": "^9.1.7",
	    "lint-staged": "^15.5.0",
	    "prettier": "3.5.3",
	    "prettier-plugin-astro": "0.14.1"
	  }
}

[rozsazoltan]

Problem

This is not the same error.

npm ERR! Could not resolve dependency:
npm ERR! dev solid-devtools@"^0.30.1" from the root project

This is a different one. Your solid-devtools extension supports up to Vite v5.

npm ERR! Found: vite@6.3.2
npm ERR! node_modules/vite
npm ERR! vite@"^6.2.6" from @astrojs/solid-js@5.0.8

But you're requesting Vite v6 in your project via @astrojs/solid-js.

Solution

You want to install solid-devtools v0.30.1 in your project, but the package only supports Vite v6 starting from v0.31.0. So, make sure to request at least v0.31 for use in your project.

• solid-devtools v0.31.0 changelog

What's interesting is that according to the error message, you're specifically requesting this from the package.json, but there's no such package listed in it. I'm not familiar with which package is requesting solid-devtools v0.30.1, but you can find out by using the following command:

npm ls solid-devtools

Once you identify which dependency is requesting solid-devtools v0.30.1, you'll need to update that dependency to a version that requires at least v0.31.

If I had to guess, you need to update your @astrojs/solid-js package.

• @astrojs/solid-js v4.2 changelog
• astro/packages/integrations/solid/package.json line 47

You can override the peerDep in your project:

npm install -D solid-devtools@latest