Vite + Vue: Module @tailwindcss/vite Not Found in Existing Project

[manjindersarkaria]

Is anyone facing issues with Vite? I installed @tailwindcss/vite as a dependency following the documentation. Then, in vite.config.ts, I added the import:

import tailwindcss from '@tailwindcss/vite';

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

However, I’m getting an error saying that the module @tailwindcss/vite could not be found. Has anyone encountered this issue before or found a solution?

[flx-sta]

@manjindersarkaria I did the exact same thing yesterday and it worked.
Could you share your package.json?

[michaelsieminski]

yeah i have this package installed but typescript cant find the module

[flx-sta]

OUTDATED RESPONSE

Keep in mind everyone that this package does not ship with typescript types according to the link:
https://www.npmjs.com/package/@tailwindcss/vite

---

If it would, it would look like this on their website:

Or if there was a seperate @types/<module> to install it would look like this:

[KevinSchiener]

yes it does

[flx-sta]

I must have missed that, thanks 👍

[...] according to the link

I only looked at the npm website

[cebulon]

In version 4.1.7 this is included in the package.
Still TS complains about not finding the type declarations.

It states: "There are types found, but they can't be resolved by your module resolve settings"
I installed a plain, vanilla solid.js project.

{
"name": "@tailwindcss/vite",
"version": "4.1.7",
"description": "A utility-first CSS framework for rapidly building custom user interfaces.",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/tailwindcss.git",
"directory": "packages/@tailwindcss-vite"
},
"bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
"homepage": "https://tailwindcss.com",
"files": [
"dist/"
],
"publishConfig": {
"provenance": true,
"access": "public"
},
"exports": {
".": {
"types": "./dist/index.d.mts",
"import": "./dist/index.mjs"
}
},
"dependencies": {
"@tailwindcss/node": "4.1.7",
"@tailwindcss/oxide": "4.1.7",
"tailwindcss": "4.1.7"
},
"devDependencies": {
"@types/node": "^20.14.8",
"vite": "^6.0.0"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6"
},
"scripts": {
"build": "tsup-node",
"dev": "pnpm run build -- --watch"
}
}

[KevinSchiener]

I'm getting the same issue:

[KevinSchiener]

Funny enough I did what the recommendation says (who knew), I changed the module resolution to bundler in my tsconfig.node.json and the error went away.

Seems like node resolution doesn't handle .mts files.

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "bundler"
  },
  "include": [
    "vite.config.mts"
  ]
}

[lobatolais]

Has anyone been able to fix this?

[michaelsieminski]

i would just use js in your vite config instead of ts i think there is no fix currently

[matthieudou]

I'm also facing the issue. I added a @ts-ignore for now but it feels hacky.

[manjindersarkaria]

It's not just about ignoring the TypeScript error—Vite isn't even able to find the required function needed to build or run the development environment. Because of this, the application will no longer be able to run.

[matthieudou]

My issue is only at the type level. The @ts-ignore hack is working, everything is running correctly. But i'd like to avoid that hack.

[asugai-bv]

I was able to fix by doing a npm install -D @tailwindcss/vite

[manjindersarkaria]

Already tried this with Yarn, but it didn't work.
yarn add @tailwindcss/vite -D

[flx-sta]

@manjindersarkaria it would only work on yarn classic I'd assume
https://classic.yarnpkg.com/en/package/@types/tailwindcss

[andre-brdoch]

No, yarn is both a package manager and a package registry. You can install packages from the npm registry using yarn package manager, and that is what almost everyone is doing.

[philipp-spiess]

Hey folks! If someone could put together a GitHub repo with a minimal Vite setup that reproduces this issue that would be great!

[manjindersarkaria]

"I will try to do that. Also, keep in mind that the issue I'm facing is with an existing Vite project that was using Tailwind 3, and the problem arose after upgrading using the command npx @tailwindcss/upgrade."
Steps from here
https://tailwindcss.com/docs/upgrade-guide

[manjindersarkaria]

I can't reproduce the issue in a fresh project where I initially used Tailwind v3 and then upgraded to v4. However, the issue occurs in my work project, which I can't share, and I'm unsure how to reproduce it in a new project. There's also a dependency in the work project that uses Tailwind v3—could that be causing the issue? The error is at the TypeScript level, where it fails to find the tailwindcss function.

[EmanueleCoppola]

I'm having the same issue with the following tsconfig.json:

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "ESNext",
    "target": "ESNext",
    "types": ["node"],
    "moduleResolution": "Node",

    "useDefineForClassFields": true,
    "jsx": "preserve",
    "isolatedModules": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

Specifically I get this:

It seems that it gets fixed by adding the types key to the @tailwindcss/vite/package.json file:

  "types": "./dist/index.d.mts",
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs"
    }
  },

Also an unlisted video that shows the problem: https://www.youtube.com/watch?v=QqRR7wz6RcY

[Hetari]

That works for me, thanks

[Aqu1tain]

That worked, thanks

[dev-heinhtetpaing]

It's work, thanks

[Harrald]

Well this is not a fix off course. at least not on our end. it seems like something the tailwind team should implement

[cebulon]

Fixed it for me. for tailwind 4.1.7

[KevinSchiener]

moduleResolution: “Node” does not resolve `mts` files. Change to `bundler`.

[EmanueleCoppola]

@KevinSchiener I know, but if I do it, everything else breaks in my case

[robeno]

Changing moduleResolution to "bundler" fixed my issue with
import tailwindcss from "@tailwindcss/vite"; Cannot find module '@tailwindcss/vite' or its corresponding type declarations. in vite.config.mts

[joaolfern]

@KevinSchiener I know, but if I do it, everything else breaks in my case

Do you have a tsconfig.node.json file? I was able to set bundler as moduleResolution on this file without this option effecting the rest of the project

[raptoria]

having a similar issue after upgrading from tailwind 3 to 4 using pnpm.
I had a vite.config.ts that worked well, but after running the script some extra files are created, vite.config.js, vite.config.d.ts and tsconfig.node.tsbuildinfo. These extra files go away if I switch from "moduleResolution": "bundler", to "moduleResolution": "node" in my tsconfig.node.json, but then I end up with a vite.config.ts(9,25): Cannot find module '@tailwindcss/vite' or its corresponding type declarations. error.

my tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-plugin-sort-import-suggestions",
        // Matches `@/`, `../` and `./`, move them up in the suggestions (This is the default config if you leave it empty)
        "moveUpPatterns": ["@/", "\\.{1,2}/"],
        // Move `dist` down in the suggestions, by deafult it's `[]`
        "moveDownPatterns": ["dist"]
      }
    ],
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["react/canary"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

my tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["vite.config.ts"]
}

[raptoria]

made a reproducible repo here: https://github.com/raptoria/tailwindv4_test
It's React/vite

[mufeiyu-ayu]

I think the team that built this package had a problem with ts or the configuration of the package, so that the type file of tailwind is not recognized, hopefully it can be solved.

[HichemTab-tech]

So just suppress with @ts-ignore for now :')

[mufeiyu-ayu]

哈哈哈

[springlogger]

Try to use PostCSS Instead of Vite. This method helped me in my Electron + Vue + TS + TailwindCSS project

[kamalciirs]

That's exactly what I was struggling with, this worked for me.
Thanks man.

[leecheck]

Rename vite.config.js to vite.config.mjs

[ZhangWillYu]

It's doesn't work

[Rawan-Nassan]

It worked for me, thank you

[ghost]

Mine was vite.config.ts. renaming it mjs worked for me. Thank you.

[ninthocean]

the same, I can only return to 3. x

[Aburraq]

Just copy paste this whole code for @tailwind/vite/package.json:

{
  "name": "@tailwindcss/vite",
  "version": "4.0.17",
  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/tailwindlabs/tailwindcss.git",
    "directory": "packages/@tailwindcss-vite"
  },
  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
  "homepage": "https://tailwindcss.com",
  "files": [
    "dist/"
  ],
  "publishConfig": {
    "provenance": true,
    "access": "public"
  },
      "types": "./dist/index.d.mts",
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs"
    }
  },
  "dependencies": {
    "lightningcss": "1.29.2",
    "@tailwindcss/node": "4.0.17",
    "@tailwindcss/oxide": "4.0.17",
    "tailwindcss": "4.0.17"
  },
  "devDependencies": {
    "@types/node": "^20.14.8",
    "vite": "^6.0.0"
  },
  "peerDependencies": {
    "vite": "^5.2.0 || ^6"
  },
  "scripts": {
    "build": "tsup-node",
    "dev": "pnpm run build -- --watch"
  }
}

[david-ouatedem]

"moduleResolution": "Node16",
adding this to my tsconfig.json solved the problem and you should probably have moduleResolution to Node16, Bundler or NodeNext

[evgeniyworkbel]

same issue. No one suggested options resolve this

vite: 5.3.2
tailiwindcss: ^4.1.4
@tailwind/cssvite: ^4.1.4

[artttimiron]

Have you resolved it??

[evgeniyworkbel]

yes: i reinstall this package and reopen editor

[ammarsaf]

From all the solution, this is working like charm!

[Gttma]

同样的问题，请问如何解决 vite+vue3+ts +tailiwindcss：^4.1.4

[KISGP]

My project environment Electron forge + TypeScript + tailwind4

I found that the problem can be solved by changing vite.config.js to vite.config.mjs , and modify forge.config.ts

[williamkhshea]

When will this issue get fixed?

[GodForKings]

[chsa911]

This worked for me
Great thank you

[DivyanshuLohani]

Thanks this worked for me

[brightredchilli]

For me, the error is emitted from my lsp(typescript-language-server), and my tsconfig.json was not set up as an 'include' file under compilerOptions. Adding the vite config file solved it:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
     ...
  },
  "include": ["src", "vite.config.ts"] // vite config file included
}

In my package.json, type is set to 'module'.

However, I'm not sure why the rest of the imports in my vite config file do not seem to have an issue without applying this change. For example, import dsv from '@rollup/plugin-dsv' does not result in an error.

[Harrald]

This is it! Thank you!