Tailwind V4, monorepo className conflict

[Codiving]

Version

"tailwindcss": "^4.1.3",
"@tailwindcss/postcss": "^4.1.3",

Problem & Expectation

I am using a monorepo.

• main-project
  ㄴ globals.css
• ui-project
  ㄴ globals.css
• graph-project
  ㄴ globals.css

In the main project, I am importing and using both the ui and graph projects.
What I want is for the main project to use the globals.css from the ui project as it is, because the components in the ui project are developed according to the design system.

However, when using components implemented in the graph project in the main project, issues arise.
It seems that when there are the same classNames, the globals.css from the ui project is overriding the classNames from the graph project.

What I want is for the main and ui projects to use the globals.css from the ui project as is, while the graph project should apply its own globals.css. In other words, I don’t want the globals.css from the ui project to affect the graph project.

Code

main globals.css

// no.1 
@import "../../ui/src/app/globals.css";
@import "../../graph/globals.css";
@source "../../ui";
@source "../../graph";

// no.2 
@import "../../ui/src/app/globals.css";
@source "../../ui";
@source "../../graph";

ui globals.css

@import "tailwindcss";
@import "../css/color.css";
@import "../css/spacing.css";
@import "../css/shadow.css";
@import "../css/radius.css";
@import "../css/font.css";
@import "../css/animation.css";
@import "../css/select.css";
@plugin 'tailwind-scrollbar';

project globals.css

@import "tailwindcss";

// ... 

I've tried both no1 and no2 listed in the main.css. I'm not sure which part of the documentation I should refer to in order to resolve this issue. I would appreciate your help.