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

[email protected]
node_modules/astro/node_modules/vite
  vite@"^6.2.0" from [email protected]
  node_modules/astro
    astro@"^5.4.3" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project

[email protected] peer
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/[email protected]
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from [email protected]
    packages/website
      [email protected]
      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 [email protected]
  node_modules/vitefu
    vitefu@"^1.0.6" from [email protected]
    node_modules/astro
      astro@"^5.4.3" from [email protected]
      packages/website
        [email protected]
        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

[email protected]
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/[email protected]
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project
  vite@"^6.2.0" from [email protected]
  node_modules/astro
    astro@"^5.4.3" from [email protected]
    packages/website
      [email protected]
      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 [email protected]
  node_modules/vitefu
    vitefu@"^1.0.6" from [email protected]
    node_modules/astro
      astro@"^5.4.3" from [email protected]
      packages/website
        [email protected]
        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!