tailwind css - TailwindCSS v4 does not apply styles in packagescomponents - Stack Overflow

Why does my tailwind not work with my components in my packagescomponentssrc files?It works in my ap

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?

Share Improve this question edited Mar 29 at 8:22 Christian Munk-Nissen asked Mar 28 at 17:21 Christian Munk-NissenChristian Munk-Nissen 134 bronze badges 1
  • 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
Add a comment  | 

1 Answer 1

Reset to default 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";

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744023555a4545294.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信