How to make `@import`-like package references with `@source` for UI package

Question

From TailwindCSS v4, you can manually control automatic source detection using @source. If I now want to map the internal files of a custom UI package so that they are included in the generated CSS, I have to provide such an ugly relative path as a documentation step for users of my UI package:

  /* your-app/css/main.css */
  @import "tailwindcss";

  /* relative path from your main.css to package */
+ @source "./../node_modules/@org/component-library";

It seems I have to resort to this, since for optimization reasons, it ignores all packages in node_modules by default.

How can I provide a nicer alternative instead of the previous approach, like this:

  /* your-app/css/main.css */
  @import "tailwindcss";

+ @source "@org/component-library";

rozsazoltan · Accepted Answer · 2025-09-23 15:07:29Z

0

It's the wrong approach to require users of the UI package to register the package sources themselves. Instead, the package should deliver the necessary @sources embedded relatively within a CSS file.

/* @org/component-library/index.css */
@source "./src"; /* or whatever */

Then ship this index.css file in the root folder so that you can give the following simple recommendation (with @import instead of @source) to those installing the UI package:

  /* your-app/css/main.css */
  @import "tailwindcss";

+ @import "@org/component-library";

answered Sep 23 at 15:07

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rozsazoltan Sep 23 at 15:52

And of course, the @source example mentioned in the question isn't bad either, since there's no reason a developer couldn't customize the package sources. It's just harder to explain, and if they're using the entire UI package anyway, it's unnecessary.

Collectives™ on Stack Overflow

How to make `@import`-like package references with `@source` for UI package

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related