Trying to load tailwind v4 into library from Angular Monorepo

I have an Angular monorepo set up with a main app main in projects/main/... and a library qrcode in projects/qrcode/... and I'm trying to have tailwind available for the lib. Tailwind (V4) does work for the main app, where I have a .postcssrc.json file and @import "tailwindcss" in the styles.css.

In my qrcode I currently have the following files:

projects/qrcode/src/lib/qrcode.css
projects/qrcode/src/lib/qrcode.html
projects/qrcode/src/lib/qrcode.ts


and I access the page within my main app within a route in projects/main/src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { Qrcode } from 'qrcode';

export const routes: Routes = [
{ path: '', component: Home, pathMatch: 'full' },
{ path: 'qrcode', component: Qrcode },
{ path: '**', redirectTo: '/404', pathMatch: 'full' },
];


So all of this works. The css also gets accessed, but my qrcode library cannot use tailwind.

qrcode.css file is:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import "tailwindcss";

// the rest of the css


What am I doing wrong here? How should I import tailwind for a library in an Angular monorepo?

Continue reading...