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?

[fromaline]

@vergeilt, I noticed, that it's a separate package: https://www.npmjs.com/package/@tailwindcss/vite

[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

[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

[Harrald]

I have the exact same error. And I can reproduce the fix

[Hetari]

That works for me, thanks

[Aqu1tain]

That worked, thanks

[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 :')

[springlogger]

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

[leecheck]

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

[ZhangWillYu]

It's doesn't work

[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