PrimeNg 19 styles don't work in Angular 19

Question

I'm developing a project in Angular 19 and I installed PrimeNg 19 but the styles don't work, I imported the theme in my app.config.ts file but still the styles don't work.

Run npm i primeng primeicons @primeng/themes

My app.config.ts file looks like this:

import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

import { routes } from './app.routes';
import { provideServiceWorker } from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    }),
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
};

My app.component.ts file looks like this:

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PrimeNG } from 'primeng/config';


@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

  constructor(private primeng: PrimeNG) { }

  ngOnInit() {
    this.primeng.ripple.set(true);
  }
}

I import the module I need from PrimeNg in my component, and I put the HTML code, I get the input, but without CSS styles. What can be happening?

Screenshot of the input and a test button without styles:

Answer 1

The answer was provided in Yong Shun's comment,

Can check whether you have provided the appConfig in the bootstrapApplication? bootstrapApplication(/* Starting Component */, appConfig)

In my case, in bootstrapApplication I had some fixed providers instead of passing by appConfig parameter.

Answer 2

The official documentation is quite brief and lacks many details. Follow the steps below to set it up properly.

1. Install tailwindcss-primeui, npm i tailwindcss-primeui,

2. Install primeng icons: npm install primeicons, this is not mandatory, since most of the demo code use icons, you'd better install it as well.

3. Create file tailwind.config.js under your project root(same location with file package.json) with the following content.

   module.exports = {
     content: ['./src/**/*.{html,ts,scss,css}', './index.html'],
     plugins: [require('tailwindcss-primeui')],
   };
   

4. Open file src/styles.scss, add the following content

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   @import "primeicons/primeicons.css";
   

5. Run npm start in terminal, you'll get the expected result.

Note that for Nx based mono repo, please skip step 2 and step 3, and run the following command to integrate tailwindcss automatically

npx nx g @nx/angular:setup-tailwind __your_project_name__

This command will generate tailwind.config.js file automatically and update src/styles.scss as well, but you need to add the tailwindcss-primeui plugin manually.

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-primeui')], // <--- add the plugin here.
};