Why does my tailwind not work with my components in my packages/components/src files?

It works in my apps/my-app but when I import my component from packages it does not apply TailwindCSS on my component.

I have my app.css in packages/styles. What should I do?

Why does my tailwind not work with my components in my packages/components/src files?

It works in my apps/my-app but when I import my component from packages it does not apply TailwindCSS on my component.

I have my app.css in packages/styles. What should I do?

• tailwind-css
• vite
• sveltekit
• turbo
• tailwind-css-4

• And i cant use @source because of sveltekit + vite - Why? It's new CSS-first directive by TailwindCSS v4. – rozsazoltan Commented Mar 28 at 17:49

1 Answer 1

TailwindCSS v4 arrived with automatic source detection. This feature scans all files and searches for used class names to generate the compiled CSS. However, it ignores paths listed in the .gitignore file, meaning it typically skips node_modules directories; which is generally a good thing.

• Which files are scanned - TailwindCSS v4 Docs
• Automatic Source Detection from TailwindCSS v4 - StackOverflow

To make it detect custom packages despite node_modules being ignored by .gitignore, you can use the @source directive as follows:

• Explicitly registering sources - TailwindCSS v4 Docs

./src/app.css

/* detects everything except the paths in the .gitignore file */
@import "tailwindcss";

/* if node_modules is ignored in .gitignore, it is possible to perform detection in its subdirectories */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";

It is important to note that the path passed to the @source directive is relative and should be defined based on the location of the CSS file.

If TailwindCSS doesn't detect anything, it's possible that you disabled source detection during import using source(none). In this case, TailwindCSS will only scan the paths specified with the @source directive.

./src/app.css

/* source(none) disables all detection, so it doesn't detect anything by default */
@import "tailwindcss" source(none);

/* in this case, it only detects the paths specified with @source */
@source "./"; /* relative path for src, since app.css in my example is located in src  */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";