So we trying to integrate tailwind in our existing Yarn Monorepo structure. It's fine with the apps (works as expected), but got stuck with figuring out how re-usable components from @common can get tailwind css applied. IDE detects tailwind. This is our structure. Would love to get some help, I know it's simple solution, but didn't found any examples:

Structure:

.
├── app-admin                 
│   ├── src/
│   │   ├── App.tsx
│   │   └── index.tsx
│   ├── package.json
│   ├── postcss.config.cjs      #importing config from @common/config
│   ├── tailwind.config.mjs     #importing config from @common/config
│   └── vite.config.mts
│
├── app-main              
│   ├── src/
│   │   ├── App.tsx
│   │   └── index.tsx
│   ├── package.json
│   ├── postcss.config.cjs      #importing config from @common/config
│   ├── tailwind.config.mjs     #importing config from @common/config
│   └── vite.config.mts
│
└── common                    
    ├── components/         
    │   └── HelloWorld/
    │       └── index.tsx              #this is the problem
    ├── config/               
    │   ├── package.json
    │   ├── postcss.config.cjs
    │   ├── style.css
    │   ├── tailwind.config.mjs
    │   └── vite.config.mts
    ├── index.ts              
    ├── package.json
    └── tsconfig.json

HelloWorld.tsx

import '@common/config/style.css';

export const HelloWorld = () => <h1 className="p-3 text-green-600">Hello</h1>;

Current App.tsx example from @app-main (testing)

import { HelloWorld } from '@common/components';

const App: FC = () => (
  <>
    <h1 className="">
      <HelloWorld />
    </h1>
    <p className="text-red-600">this is some text</p>
    <p className="p-4">this is some text</p>
  </>
);

export default App;

Visual example. Text "Hello" from @common/components expected to have p-3 text-green-600: