PrimeNG 19 styles not applied when using Tailwind CSS 4

I'm creating a new Angular 19 project using PrimeNG 19 and Tailwind CSS 4. I followed both the Tailwind and PrimeNG installation guides. However, when I run my application, the PrimeNG styles are not being applied (for example, input fields like the following have no border).

<input type="text" pInputText id="username" class="w-full" />


I’ve updated styles.css and app.config.ts as explained here: https://primeng.org/tailwind And I’ve configured Tailwind following this guide: https://tailwindcss.com/docs/installation/framework-guides/angular

styles.css

@import "tailwindcss";
@plugin "tailwindcss-primeui";


app.config.ts

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura
}
})
]
};


.postcssrc.json

{
"plugins": {
"@tailwindcss/postcss": {}
}
}


Has anyone experienced this issue or knows how to fix it? Thank you very much!

Continue reading...