Using Tailwind with Multiple UI Packages in a Monorepo

[Moonachi]

Version

tailwind v4

I’m developing using a monorepo structure.
There are two UI projects, and I develop components in each of them.
These components are then imported and used in the Main project.

main-ui

@import "tailwindcss" prefix(main);

sub-ui

@import "tailwindcss" prefix(sub);

main project

@import "../../main/globals.css";
@import "../../sub/globals.css";
@import "tailwindcss";

I expected to be able to use all the classes in the Main project, but things didn't work as expected.
How can I properly use components from different UI projects within the Main project?

I have applied different basic CSS styles for fundamental elements like input in each project. It would be great if these are applied correctly as well.

[rozsazoltan]

Slightly off-topic. I think I would have just declared a shared TailwindCSS configuration across multiple themes. I would have placed the individual theme styles into separate main-ui and sub-ui globals.css files. After that, you can use whichever theme you want - globally or inline on specific components. Every setting declared in @theme is tied to a global variable, which you can override as needed.