[v4] Unused variables and classes in the output when using Vite

[rozsazoltan]

I came across a question on StackOverflow that I didn’t understand at first, as I had a similar issue up until v4.0.4 with CLI and PostCSS, but v4.0.5 fixed it, and I verified that it works in v4.0.6 as well.

• How to remove unused colors during build?

However, when I create a new Vite project, for example, with Svelte or Vue, the build results include unused variables and classes, so in a simple empty project, I get a 22.53kb result instead of the expected file size, which is the Preflight (4kb?).

The .gitignore by default excludes the mapping of node_modules, so I assume TailwindCSS doesn't pull variables from there. There isn't a single TailwindCSS class used in the project, and still, a lot of unnecessary content is getting into dist/css/index.css.

The problem is, of course, resolved with PurgeCSS, but the real question is why unused variables (e.g., all colors, ...) and class names (e.g., .shadow, .capitalize, .lowercase) are included in the output by default.

Versions

"dependencies": {
  "@tailwindcss/vite": "^4.0.6",
  "tailwindcss": "^4.0.6",
  "vue": "^3.5.13"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^5.2.1",
  "@vue/tsconfig": "^0.7.0",
  "typescript": "~5.7.3",
  "vite": "^6.1.0",
  "vue-tsc": "^2.2.0"
}

Reproduction steps

• Vite create-app
• TailwindCSS v4 with Vite installation steps
• pnpm build

[wongjn]

When using @tailwindcss/vite, Tailwind uses the Vite module graph to scan code for class names, rather than the file system huelistics (when not using @tailwindcss/vite). Thus these other class names might be appearing in some compiled code.

You may be able to switch to the file-based scanning in Vite once #16425 is in.

[rozsazoltan]

Thanks for the quick response, that's what I concluded as well, since I excluded all files, and it still managed to include them. I didn't search through the PRs, I just looked at the open issues.

[rozsazoltan]

PurgeCSS actually solves the problem, so it's not a big issue, but it's still strange behavior.

[saadeghi]

Try @source
https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection