tailwindcss is not assignable to type 'AcceptedPlugin' in vite.config.ts

[zanminkian]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

vite 4.4.9

What version of Node.js are you using?

v16.20.2

What browser are you using?

chrome

What operating system are you using?

linux

Reproduction URL

https://github.com/zanminkian/react-boilerplate/tree/tailwind-issue

Describe your issue

1. Run git clone https://github.com/zanminkian/react-boilerplate.git
2. Checkout tailwind-issue branch using git checkout tailwind-issue
3. Run pnpm install
4. Run pnpm build will fail. Type 'typeof import("/root/projects/react-boilerplate/node_modules/.pnpm/tailwindcss@3.3.3_ts-node@10.9.1/node_modules/tailwindcss/types/index")' is not assignable to type 'AcceptedPlugin'.

[thecrypticace]

This seems to be a problem with the module resolution in tsconfig but I don't know why. If you override it to use Node rather than Node16 it works but, as far as I know, this shouldn't matter.

Basically what's happening is it thinks that import tailwindcss from "tailwindcss" produces an object of the form { default: PluginCreator<…> } rather than PluginCreator<…>.

I'll see if I can track down what's happening here (or at least a why).

[zanminkian]

Typescript core team has a online tool to help you make your package export type correctly, which may help you.

• https://github.com/arethetypeswrong/arethetypeswrong.github.io
• https://arethetypeswrong.github.io/?p=tailwindcss%403.3.3

[thecrypticace]

This should be fixed by #12097, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.

Insiders builds take roughly 15m to publish but NPM was complaining about the last one already existing when it doesn't so… fingers crossed lol