The packaging result of the Vite library mode is the css of the entire project

[Nicholas003]

What version of Tailwind CSS are you using?

v4.0.9

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

"@tailwindcss/postcss": "^4.0.9",
"@tailwindcss/vite": "^4.0.9",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.9",
"vite": "^6.1.0",

What version of Node.js are you using?

v20.18.3

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

Describe your issue

I am using the Vite Library Mode to package. I only want to package the styles of specified files and related dependency files, but now the packaged styles are all from the entire project

build HelloWorld.vue ，The result contains all styles
I know 'base' params but that would lose the dependent style

[incutonez]

Hello! I have the same question as you (posted here). I imagine somewhere in your css file, you're doing @import "tailwindcss", which at least in my project, is the issue because if I comment that out, all the extraneous css goes away. So I'm thinking it's an issue in the @tailwindcss/vite plugin not respecting excluded files.

[incutonez]

@philipp-spiess, why did you convert this to a discussion (from this issue)? It seems like it's a bug in the tailwindcss vite plugin, no?

[philipp-spiess]

@incutonez Ah, I see. Yeah so the way the Tailwind CSS Vite plugin works is that it uses the current Vite root to find class names used in the project. From there on, our auto-content-detection algorithm will run and pick up all relevant files in your project. If you only need a few directories to be scanned, you'll need to manually limit this (by e.g. setting a custom base path into a smaller sub-directory).

In an earlier build we were trying to be smarter about this (and use the files scanned through the Vite plugin) but this was unfortunately causing a lot of issues that were often only noticeable in production so we had to make the hard choice to revert it and now use the same content-discovery heuristics that we also use for the PostCSS extension.

[incutonez]

@philipp-spiess, ah, okay, thank you for that explanation. I've been trying to use the custom base path approach, but that seems to cause my test code to not be able to use the styles from my theme. I'll keep trying and report back.

[incutonez]

For the life of me, I can't get this working, so I must be missing something obvious. I have attached my sample package. The only thing that should be in the output is src/theme.css... it still outputs Tailwind's default values, and my test application (using npm run dev) doesn't have the bg-select-200 applied to the text. Any advice?

theme.zip

[philipp-spiess]

Hey! So two things:

• You've completely disabled source detection with source(none) so Tailwind CSS does not scan any files anymore. What you want in your case is to set it to the src directly that the CSS file happen to be in so source(".") should do the trick.
• "it still outputs Tailwind's default values" I suppose you refer to preflight, you can disable this via: https://tailwindcss.com/docs/preflight#disabling-preflight

So if you combine this, you can use:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(".");

@theme static {
  --color-select-200: var(--color-sky-200);
}

which builds the following .css file for your app:

/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
@layer theme {
  :root, :host {
    --color-sky-200: oklch(.901 .058 230.902);
    --color-select-200: var(--color-sky-200);
  }
}

@layer base, components;

@layer utilities {
  .bg-select-200 {
    background-color: var(--color-select-200);
  }
}

[incutonez]

@philipp-spiess, first of all, thank you very much for being patient and taking the time to help me debug this issue.

Secondly, yeah, sorry, I was grasping at anything with the source(none).

Next, if I update that in our sample package, but store the theme.css in its own directory (as I want to exclude the app* code), then it does produce the proper output. Success!

Lastly, if I consume this in my app, it doesn't work. Once again, I'm probably missing something, but it's not obvious. I have attached a zip with both the theme and ui package that consumes the built version of it.

Repro:

1. Extract download
2. cd theme && npm i && npm run dev
3. Open link and notice the blue background color... expected
4. npm run build && cd ../ui && npm i && npm run dev
5. Open link and notice no blue background color... unexpected

tailwind-theme.zip