How to avoid css bloat when using a tailwindcss component library?

Question

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!

rozsazoltan · Accepted Answer · 2025-04-13 11:59:39Z

0

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

answered Apr 13 at 11:59

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

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

Collectives™ on Stack Overflow

How to avoid css bloat when using a tailwindcss component library?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related