Install Tailwind CSS with Astro is not working.

[dande-sun]

I install tailwind with this doc[https://tailwindcss.com/docs/installation/framework-guides/astro], have two problem.

1. astro.config.mjs report a error,
   Type 'Plugin$1[]' is not assignable to type 'PluginOption'.
   Type 'Plugin$1[]' is not assignable to type 'PluginOption[]'.
   Type 'Plugin$1' is not assignable to type 'PluginOption'.
   Type 'Plugin$1' is not assignable to type 'Plugin'.
   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)
   (alias) tailwindcss(): Plugin$1[]

npm list vite @tailwindcss/vite
frontend@0.0.1
├─┬ @astrojs/react@4.3.0
│ ├─┬ @vitejs/plugin-react@4.6.0
│ │ └── vite@7.0.2 deduped
│ └── vite@6.3.5
├─┬ @tailwindcss/vite@4.1.11
│ └── vite@7.0.2
└─┬ astro@5.11.0
├── vite@6.3.5
└─┬ vitefu@1.1.1
└── vite@7.0.2 deduped

2. I add the tailwind.config.ts file, and input some custom colors, but those colors is not working.
   theme: {
   extend: {
   colors: {
   testcolor: '#00ff00',
   primary: {
   DEFAULT: "#ef483d",
   foreground: "hsl(var(--primary-foreground))",
   },
   }}}

[JulienNoel]

i have the same error

[rozsazoltan]

Related: withastro/astro#14030

Waiting for withastro/astro#14025 PR merge.

Vite plugin types are known to be fragile, it can even break between minors. Vite 7 requires a major so it will be part of Astro 6, later this year (withastro/roadmap#1174). In the meantime, you can add a // @ts-expect-error comment safely

---

Source: withastro/astro#14030 (comment)