Tailwindcss doesn't rebuild CSS for new files

[bluwy]

Describe the bug

I don't remember if we've discussed before, but tailwindcss can't seem to track new files due to limitations of this.addWatchFile:

vite/packages/vite/src/node/plugins/css.ts

Lines 1433 to 1444 in fe30349

	} else if (message.type === 'dir-dependency') {
	// https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies
	const { dir, glob: globPattern = '**' } = message
	const files = globSync(globPattern, {
	absolute: true,
	cwd: path.resolve(path.dirname(id), dir),
	expandDirectories: false,
	ignore: ['**/node_modules/**'],
	})
	for (let i = 0; i < files.length; i++) {
	deps.add(files[i])
	}

I'm not sure if we want to special case this, or leave it to tailwind's next major to possibly fix things.

Found this from withastro/astro#12255

Related: #15460 (but not exactly the same I think)

Reproduction

https://stackblitz.com/edit/vitejs-vite-nk6bcl?file=index.html&terminal=dev

Steps to reproduce

• Start dev server
• Copy the content of index.html and create a new foo.html at the root for example and paste the content in it.
• Rename text-red-500 in the pasted content to something else new, like text-green-500
• Open http://localhost:5173/foo and notice that the text is black, not green (for example)

After a full server restart and reload the page, the color is then correctly applied

System Info

n/a

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

We should be able to support this by doing something similar to the vite:import-glob plugin.

vite/packages/vite/src/node/plugins/importMetaGlob.ts

Lines 91 to 105 in ad9a987

	hotUpdate({ type, file, modules: oldModules }) {
	if (type === 'update') return
	const importGlobMap = importGlobMaps.get(this.environment)
	if (!importGlobMap) return
	const modules: EnvironmentModuleNode[] = []
	for (const [id, globMatchers] of importGlobMap) {
	if (globMatchers.some((matcher) => matcher(file))) {
	const mod = this.environment.moduleGraph.getModuleById(id)
	if (mod) modules.push(mod)
	}
	}
	return modules.length > 0 ? [...oldModules, ...modules] : undefined
	},