@tailwindcss/vite plugin: issue with Vite and plugin typing

[KipzonderKop101]

Hi all,

TailwindCSS version: 4.1.12
TailwindCSS plugin version: 4.1.12

SolidStart version: 1.1.0
Solid version: 1.9.5
Vinxi: 0.5.7

Node version: 22.13.1
NPM version: 11.5.2

Browser version seems irrelevant, as error happens before anything is shown at all.

OS: Windows 11

Reproduction URL: https://github.com/KipzonderKop101/tailwindcss-typing-issue-reproduction

Let's start off by thanking the team for the plugin in the first place. It's been a breath of fresh air.

However, I had an issue with my new SolidStart application. While configuring my app.config.ts I got a typing error. I've had this issue before and got around it by using Tailwind's CLI, which meant I lost HRM updates. Because of this, I looked into it, and configured the plugins such as SolidStart describes, which left me with the following configuration.

import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";

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

This configuration should be perfect on paper, but it gave me the following error. Which of course is the typing error I described.

Type 'Plugin$1<any>[]' is not assignable to type 'PluginOption'.
  Type 'Plugin$1<any>[]' is not assignable to type 'PluginOption[]'.
    Type 'Plugin$1<any>' is not assignable to type 'PluginOption'.
      Type 'Plugin$1<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: HotUpdatePluginContext, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<void | EnvironmentModuleNode[]>> | undefined'.
            Type '(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>' is not assignable to type 'ObjectHook<(this: HotUpdatePluginContext, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<void | EnvironmentModuleNode[]>> | undefined'.
              Type '(this: MinimalPluginContext & { environment: DevEnvironment; }, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<...>' is not assignable to type '(this: HotUpdatePluginContext, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<void | EnvironmentModuleNode[]>'.
                The 'this' types of each signature are incompatible.
                  Type 'HotUpdatePluginContext' is not assignable to type 'MinimalPluginContext & { environment: DevEnvironment; }'.
                    Type 'HotUpdatePluginContext' is missing the following properties from type 'MinimalPluginContext': debug, error, info, meta, warnts(2322)

So as to reproduce, create a new project with SolidStart and install the latest version of the TailwindCSS Vite plugin. After the configuration mentioned earlier you should get the error.

As to solve the error for now, you can cast the plugin as an any type, which of course is suboptimal.

import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    // Cast as any untill Tailwindcss is updated to use Vite 6
    plugins: [tailwindcss() as any],
  },
});

Hope this helps!

[Matheun]

Quickly looked into it, i think it's the same issue as described here.

The following fixed the issue on your reproduction link:

{
  "name": "example-basic",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
    "version": "vinxi version"
  },
  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.1.0",
    "@tailwindcss/vite": "^4.1.12",
    "solid-js": "^1.9.5",
    "tailwindcss": "^4.1.12",
    "vinxi": "^0.5.7",
    "vite": "^6.3.5" // Added v6 of vite
  },
  "engines": {
    "node": ">=22"
  }
}

[thecrypticace]

If you run npm ls vite you'll see that you have multiple versions of Vite installed in the project which is the cause of the type errors:

example-basic@ /Users/jordanpittman/Desktop/tailwindcss-typing-issue-reproduction
├─┬ @solidjs/start@1.1.7
│ ├─┬ @tanstack/server-functions-plugin@1.121.21
│ │ └─┬ @tanstack/directive-functions-plugin@1.121.21
│ │   └── vite@7.1.3 deduped
│ └─┬ vite-plugin-solid@2.11.8
│   ├── vite@7.1.3 deduped
│   └─┬ vitefu@1.1.1
│     └── vite@7.1.3 deduped
├─┬ @tailwindcss/vite@4.1.12
│ └── vite@7.1.3
└─┬ vinxi@0.5.8
  └── vite@6.3.5

While our Vite plugin works with Vite 7 it looks like the current release of Vinxi is pinned to Vite 6.x:
https://github.com/nksaraf/vinxi/blob/b5c05d082a1beea4cdc2c2e729ab9e7adf363447/packages/vinxi/package.json#L217

And those are the types referenced in the solid config as well (even though it looks like the rest of it otherwise supports Vite 7 afaict).

If you click through the plugins property in the config you'll see it takes you to node_modules/vinxi/node_modules/vite which is the 6.x version while our plugin is seeing types from the 7.x version.

I'd probably add Vite 6 to the root of the project to make the errors go away and then upgrade to Vite 7 once Vinxi updates.

You should see something like this after running npm ls vite:

example-basic@ /Users/jordanpittman/Desktop/tailwindcss-typing-issue-reproduction
├─┬ @solidjs/start@1.1.7
│ ├─┬ @tanstack/server-functions-plugin@1.121.21
│ │ └─┬ @tanstack/directive-functions-plugin@1.121.21
│ │   └── vite@6.3.5 deduped
│ └─┬ vite-plugin-solid@2.11.8
│   ├── vite@6.3.5 deduped
│   └─┬ vitefu@1.1.1
│     └── vite@6.3.5 deduped
├─┬ @tailwindcss/vite@4.1.12
│ └── vite@6.3.5 deduped
├─┬ vinxi@0.5.8
│ └── vite@6.3.5 deduped
└── vite@6.3.5

[KipzonderKop101]

@Matheun & @thecrypticace. I wanted to quickly thank you for your help! Please forgive me for blaming the plugin too soon. Again, thanks for the help and the hard work!

[Luktaros]

Quickly looked into it, i think it's the same issue as described here.

The following fixed the issue on your reproduction link:

{
"name": "example-basic",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"version": "vinxi version"
},
"dependencies": {
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.0",
"@solidjs/start": "^1.1.0",
"@tailwindcss/vite": "^4.1.12",
"solid-js": "^1.9.5",
"tailwindcss": "^4.1.12",
"vinxi": "^0.5.7",
"vite": "^6.3.5" // Added v6 of vite
},
"engines": {
"node": ">=22"
}
}

This fix it for me, thank you ❤️

[Luktaros]

UPDATE:
This '"vite": "^6.3.5" // Added v6 of vite' broke my HMR.
Going with the 'as any' solution for now.

[rozsazoltan]

@Luktaros Instead of as any, it might be better to ignore the error: // @ts-expect-error