angulartailwind-cssprimengtailwind-css-4

PrimeNG 19 styles not being applied


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?


Solution

  • 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'
    })