I'm creating a new Angular 19 project using PrimeNG 19 and Tailwind CSS v4. 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": {}
}
}
main.ts
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
Has anyone experienced this issue or knows how to fix it?
Edit: I created a new project only with primeng 19, without tailwind. Primeng styles are not applying either, so it seems an issue with primeng. Should I change the post title to reflect it?
Ok, so a silly mistake was the cause of styles not being applied. I post the solution here because maybe I'm not the only one who makes these little oversights. So... I wasn't importing InputTextModule in the controller
input.component.html
<input type="text" pInputText id="username" />
input.component.ts
@Component({
selector: 'app-input',
imports: [InputTextModule],
templateUrl: './input.component.html',
styleUrl: './input.component.css'
})