How to generate many CSS files with Tailwind 3

[albertcito]

I'm working with a monorepo. I have a folder that I would like to generate its own CSS file.

For instance:

- app
  - doc
    - global.css
    - tailwind.config.js
- package
  - ui

Right now, the tailwind.config.js file reads the package/ui content and adds the classes in the global.css.

Is there a way to generate a file in package/ui/styles.css only with the classes generated there? To be able to import that one in global.css, for instance:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "../../packages/ui/styles.css"

[rozsazoltan]

To do this, you need to run the TailwindCSS compilation multiple times with different content properties, then save the generated results wherever and under whatever filenames you prefer. But in this case, be prepared for a lot of duplication, and you won't really gain anything compared to having a single global CSS file.

The goal is not entirely clear. If the aim is to generate the CSS only for the components actually used (e.g., /package/ui/input.tsx and /package/ui/button.tsx - and if you only used button, you don't want generated CSS for input), then the content needs to be parameterized correctly once. Unfortunately, this has to be done manually, or via some automation that discovers all imports and determines the appropriate content value based on that.

And I don't understand the purpose of package/ui/styles.css; you should not ship generated CSS with TailwindCSS UI packages. It's always the responsibility of the final app/project to generate the CSS with the appropriate content settings.

So, I don't quite understand the goal, and this is a useful note from me regarding v4: All components from the UI package are included in the project's generated CSS, but I don't use every component (The logic can be applied to v3 as well, you just need to focus on the JS content property instead of @source.)

[albertcito]

I'm working on a personal project to create a ui package. My idea is /package/ui has all the components. Therefore, the package/ui/styles.css will have all the CSS for those components.

When the user installs that package, the user just has to create their global.css and add the package CSS. Is it possible or good idea?

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "@mypackage/styles.css"

[rozsazoltan]

Honestly, I would never do it that way. It's perfectly fine to have all components inside package/ui, but you don't need to pre-generate any CSS. (If you still have a styles.css, it shouldn't contain Tailwind-generated CSS - only custom styles that are specifically required by certain components.)

Then, in the project's tailwind.config.js, include the path to package/ui/components in the content property, and perform the final CSS generation at the project level - as if all components from package/ui were part of the project itself.

This way, you can reduce the size of the generated CSS by writing an automation script that detects which components are actually used in the project and only includes those in the content configuration.