[v4] Missing styles for a Svelte UI Kit

[SaturnRingz]

What version of Tailwind CSS are you using?
tailwindcss@4.1.13

What build tool (or framework if it abstracts the build tool) are you using?
vite@7.1.5
svelte@5.38.8
sveltejs/kit@2.37.1

What version of Node.js are you using?
node/22.19.0

What browser are you using?
Chrome

What operating system are you using?
Ubuntu 22.04.1 (jammy)

Describe your issue
Hello there!

We are working on a project that consumes a UI Kit we maintain, and we've decided to jump to Tailwind v4 along with the implementation of Svelte 5. In the named kit, we've defined a set of different rules and directives such as a theme with many colors and custom classes:

/* [UI-KIT] contents of src/theme.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
/*This is needed since the given components uses tailwind*/
@import 'tailwindcss';

@theme {
	--color-success: #ed1d24;
	--color-text-disabled: #a5a5a5;
	--color-disabled: #c3c3c3;
	...
}
body {
	font-family: 'Montserrat', sans-serif;
}
.font-play {
	font-family: 'Play', Courier;
}
.rounded-card {
	border-radius: 10px;
}
...

Now, theme.css is imported to the app.css:

/* [UI-KIT] contents of src/app.css */
@import './theme.css';

Later, theme.css is exported so whoever has access to the kit must have access to every definition from theme.css:

/* [UI-KIT] contents of package.json */
...
"exports": {
		".": {
		"types": "./dist/index.d.ts",
		"svelte": "./dist/index.js"
	},
	"./tailwind-config": "./dist/config.js",
	"./theme.css": "./src/theme.css"
},
...

However, even if the components are being displayed the correct way while developing inside the kit, when I use them in the actual project, the styled components doesn't display as they are supposed to.

It caught my attention that the file produced by the execution of this command:

npx @tailwindcss/cli -i ./src/app.css -o ./src/test-output.css --watch

when done in both the kit and the project, generates files with a considerable difference of size, where test-output.css in the Kit contains 1067 lines, but the test-output.css of the project just returns 436 lines.

Sorry for the long description, I hope the info is enough.

[wongjn]

I assume in the example project, that UI kit gets installed into node_modules. This is significant since Tailwind's automatic source detection will not scan code in node_modules. This means Tailwind won't scan for class names in files in node_modules/ui-kit, hence the difference in the output CSS rules.

To workaround this, consider explicitly registering the UI kit's files that contain Tailwind class names like:

/* [UI-KIT] contents of src/theme.css */
…

@source "../dist";

[SaturnRingz]

Ages will pass and I won't be able to thank you enough for this