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?
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.
To make it detect custom packages despite node_modules being ignored by .gitignore, you can use the @source directive as follows:
./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";