[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

[rozsazoltan]

Yes, I didn't carry over every detail from SO. I've tried all of these; the point is that neither @source nor .gitignore has any effect on the result, which still includes unused variables and classes.

Tested steps

• Disabling automatic source detection with source(none) -> Not a good result (18kb with unused variables)
• Excluding files and directories from automatic source detection with .gitignore -> Not a good result (18kb with unused variables)
• Using @tailwindcss/postcss plugin instead of the more compatible vite plugin -> Not a good result (18kb with unused variables)
• Using @tailwindcss/postcss plugin and purgecss -> not recommended for Vue projects, would work without Vite (Specific error due to Vue; It probably would have worked in a native JavaScript Vite project; But it's no coincidence that we have a Vite-specific plugin from TailwindCSS.)
• Using @tailwindcss/vite plugin and purgecss -> successful (4kb without unused variables)

[philipp-spiess]

Hey! We are working on purging unused variables (actually had this rolled out already for a patch release but had to revert due to compatibility issues that we need to fix first). I also understand your frustration with the unexpected class names being added, however based on our testing that should be a minimum and likely yield the same results that Tailwind CSS file-based routing would enable. If you could share a quick repro that could help here so we can improve our heuristics?
Nevertheless this is working as intended so I'm going to convert this to a discussion. 👍

[rozsazoltan]

I used a cleanly installed Vite and followed the TailwindCSS v4 installation steps. After that, the issue persisted, even when using @source(none). This happened even though my entire source code didn’t contain a single TailwindCSS variable.

The issue isn't too drastic; we're talking about roughly 20kb; but it's a bit strange that @source(none) didn't exclude these color codes and class names.

The same setup without Vite - for example, using the CLI or just a simple PostCSS plugin - works as expected, producing a file of around 4kb that only includes what I actually used (except for the --font-sans and --font-mono variables, which I've never been able to remove). Given that, it seems odd how much the results change when building behind Vite and using the @tailwindcss/vite package.

I'll see if I can put together a repro, but in the meantime, I just wanted to share my thoughts.