Type error when importing Vite plugin in Nuxt 4.3.1 config

[ImDarkTom]

In the latest Nuxt version (4.3.1), attempting to use the Tailwind Vite plugin via the nuxt.config.ts Vite plugins section I get this type error: Type 'Plugin<any>[]' is not assignable to type 'PluginOption'.

Does anyone else get this issue? This only happened after I tried updating from Nuxt 4.2.2.

I saw a similar post here: #17541 (comment), but their solution of deleting the lockfile and reinstalling the packages doesn't seem to work.

I created a repo that seems to be able to reproduce this issue here.

[sunnypatell]

this is a vite version mismatch between @nuxt/schema and @tailwindcss/vite, not a tailwind bug per se.

what's happening

@tailwindcss/vite returns Plugin[] (an array of vite plugins), which is a totally valid pattern in vite. the PluginOption type accepts arrays:

type PluginOption = Thenable<Plugin | FalsyPlugin | PluginOption[]>

the problem is that nuxt 4.3.x bumped its internal vite dependency to ^7.3.1, and @nuxt/schema externalizes the vite types rather than bundling them. so the Plugin type in your @tailwindcss/vite resolves against one copy of vite, while nuxt's config types resolve against another.

between vite versions, the hotUpdate hook's this context type changed, making Plugin<any> from one version structurally incompatible with the other. the nuxt team has acknowledged this as a known architectural limitation.

the same issue has shown up in solidstart and astro for the same reason.

fix

option 1: force a single vite version (cleanest)

add vite as an explicit dependency so your package manager deduplicates it:

{
  "dependencies": {
    "vite": "^7.3.1"
  }
}

then delete your lockfile + node_modules and reinstall. verify with npm ls vite or pnpm ls vite that there's only one copy.

option 2: package manager override

for pnpm:

{
  "pnpm": {
    "overrides": {
      "vite": "^7.3.1"
    }
  }
}

for npm:

{
  "overrides": {
    "vite": "^7.3.1"
  }
}

option 3: suppress the type error (quick workaround)

export default defineNuxtConfig({
  vite: {
    plugins: [
      // @ts-expect-error vite type mismatch between @nuxt/schema and @tailwindcss/vite
      tailwindcss()
    ],
  },
})

this is safe at runtime since vite flattens nested plugin arrays regardless of the types.

relevant links

• @tailwindcss/vite source (returns Plugin[] at line 29)
• @nuxt/schema vite externalization
• nuxt issue about missing vite dep

[ImDarkTom]

Thanks for the suggestions,

I should've mentioned in the original post, but I did try to install Vite as a dependency earlier when trying to fix this on my own as I did see other posts related to this mention Vite version mismatches. This didn't work for some reason as even when Vite was deduped to use the same version for all dependencies it still gave the same error. Both the first and second fixes didn't seem to work when I tried them in the reproduction repo I linked.

package.json:

{
  ...
  "dependencies": {
    "@tailwindcss/vite": "^4.1.18",
    "nuxt": "^4.3.1",
    "tailwindcss": "^4.1.18",
    "vite": "^7.3.1", // Vite installed as dependency
    "vue": "^3.5.28",
    "vue-router": "^4.6.4"
  }
}

Running npm ls vite

latest-4-3-1@ /home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1
├─┬ @tailwindcss/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @nuxt/[email protected]
│ │ ├─┬ @nuxt/[email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ @vue/[email protected]
│ │ │ └─┬ [email protected]
│ │ │   └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected] deduped
│ │ │ └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ └─┬ @nuxt/[email protected]
│   ├─┬ @vitejs/[email protected]
│   │ └── [email protected] deduped
│   ├─┬ @vitejs/[email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   └── [email protected] deduped
└── [email protected]

Issue still persists

So far the only fix as you've suggested is to just suppress the type error which if nothing else is found will have to suffice for once I need to upgrade.

[sunnypatell]

@ImDarkTom hmm ok if deduping vite didn't fix it then the problem is probably deeper than a version mismatch.

can you check what typescript says about the actual type? run this in your project:

npx tsc --noEmit

and also check if the @tailwindcss/vite plugin's export signature matches what nuxt expects:

node -e "const p = require('@tailwindcss/vite'); console.log(typeof p.default, Object.keys(p))"

my guess is nuxt 4.3.1's vite plugin type expects a different return shape than what @tailwindcss/vite exports. the tailwind v4 vite plugin returns an array of plugins (not a single plugin object) which can cause type mismatches in frameworks that expect Plugin instead of Plugin[].

try wrapping it:

// nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss() as any]  // bypass the type check
  }
})

ugly but if it works at runtime then it's purely a type mismatch, not an actual incompatibility. you could also try pinning @tailwindcss/vite to 4.0.0 which had a simpler plugin signature before they changed it.

if none of that works, drop the exact error message here and i'll dig deeper.

[ImDarkTom]

Ran the commands and here's the results for both the old and new versions.

tsc --noEmit seems to output nothing for both versions:

tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1$ npx tsc --noEmit
tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1$ 

tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/working-4.2.2$ npx tsc --noEmit
tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/working-4.2.2$ 

and the second command gives the same output for both:

tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1$ node -e "const p = require('@tailwindcss/vite'); console.log(typeof p.default, Object.keys(p))"
function [ '__esModule', 'default' ]

tom@desktop:~/projects/node/nuxt-tailwindcss-typing-issue/working-4.2.2$ node -e "const p = require('@tailwindcss/vite'); console.log(typeof p.default, Object.keys(p))"
function [ '__esModule', 'default' ]

Im pretty sure it is just a type mismatch, since tailwind classes load and the project does run and build even with the error present. Downgrading @tailwindcss/vite to version 4.0.0 still causes the error to appear.

Here's the full error if needed:

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("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'Plugin<any>'.
        Types of property 'hotUpdate' are incompatible.
          Type 'ObjectHook<(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>> | undefined' is not assignable to type 'ObjectHook<(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>, {}> | undefined'.
            Type '(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>' is not assignable to type 'ObjectHook<(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>, {}> | undefined'.
              Type '(this: import("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/rollup/dist/rollup").MinimalPluginContext & { ...; }, options: import("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/vite/dist/node/index").HotUpdateOptions) => void | ... 1 more ... | Pro...' is not assignable to type '(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>'.
                The 'this' types of each signature are incompatible.
                  Type 'MinimalPluginContext & { environment: DevEnvironment; }' is not assignable to type 'import("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/rollup/dist/rollup").MinimalPluginContext & { environment: import("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/vite/dist/node/index").DevEnvironment; }'.
                    Type 'MinimalPluginContext & { environment: DevEnvironment; }' is not assignable to type 'MinimalPluginContext'.
                      Types of property 'meta' are incompatible.
                        Property 'viteVersion' is missing in type 'PluginContextMeta' but required in type 'import("/home/tom/projects/node/nuxt-tailwindcss-typing-issue/latest-4.3.1/node_modules/rollup/dist/rollup").PluginContextMeta'.

I also tried the same thing on Nuxt 4.3.0 and the error is still there, so I might try to see what they changed between versions that would have cause this to appear.

[sunnypatell]

@ImDarkTom thanks for the detailed diagnostics. since tsc --noEmit passes clean and the runtime behavior is identical, this confirms it's purely a type-level incompatibility, not an actual bug in the plugin.

the root cause is a version mismatch between rollup types. your error shows MinimalPluginContext from one rollup version expecting meta.viteVersion but the type definition from another rollup version doesn't include it. this happens when nuxt's @nuxt/schema (or @nuxt/vite-builder) pins a different vite version than what @tailwindcss/vite resolves to, and their transitive rollup type definitions conflict.

since downgrading @tailwindcss/vite didn't help, the mismatch is on the nuxt side. a couple options:

1. pin matching vite versions in your package.json overrides/resolutions so both nuxt and tailwindcss resolve the same rollup types
2. add skipLibCheck: true in tsconfig (pragmatic since this is a false positive, the types are functionally equivalent)
3. wait for nuxt to align their vite dependency (this is a known nuxt 4.3.x growing pain)

option 2 is the quickest if the type error is blocking your workflow. option 1 is cleaner but can introduce other issues if nuxt expects a specific vite version internally.

[ImDarkTom]

This seems to no longer be an issue with @tailwindcss/vite version 4.2.2 and/or Nuxt 4.3.1.