I built a component library that uses tailwindcss. Now I'm wondering how best to specify the source to avoid css bloat. The ui-library offers lots of components, but my app just use a few of them. I.e.

import { Button } from "shared-ui/button"; // Button contains tailwindcss classes 

If I add the source like this:

@source "node_modules/shared-ui/dist/**/*.js'"

all components are parsed and unnecessary css-directives land in my result-app-css file. How to fix this?

Thanks!

I built a component library that uses tailwindcss. Now I'm wondering how best to specify the source to avoid css bloat. The ui-library offers lots of components, but my app just use a few of them. I.e.

import { Button } from "shared-ui/button"; // Button contains tailwindcss classes 

If I add the source like this:

@source "node_modules/shared-ui/dist/**/*.js'"

all components are parsed and unnecessary css-directives land in my result-app-css file. How to fix this?

Thanks!

• reactjs
• tailwind-css
• tailwind-css-4

1 Answer 1

This now depends on where the CSS is located where you declare the sources. It's better to use a relative path:

./src/global.css

@import "tailwindcss";

@source "./../node_modules/shared-ui/dist/**/*.js"; /* without ' char */

The node_modules folder is automatically ignored by gitignore, so you can safely add the shared-ui package to the discovery source list.

However, I wouldn't define the files myself; the automatic source detection will handle it based on the path, you only need to add the folder:

./src/global.css

@import "tailwindcss";

@source "./../node_modules/shared-ui/dist";

• @source directive - TailwindCSS v4 Docs