Adding PrimeNG and Tailwind CSS to an Angular 19 NX Project

Starting the Project

It’s been a long time since I last worked on a side project, as work and family kept me busy. I wanted to start fresh and decided to use Angular 19. The first step was to create a workspace, which was straightforward:

npx create-nx-workspace@latest canva

This command quickly set up an NX workspace with an Angular application. Everything went smoothly, and I was ready to move on to the next step — choosing a component library.

Choosing PrimeNG

When it came to selecting a component library, I did some quick Googling. Most recommendations pointed to PrimeNG, primarily because it has a broader range of components compared to Angular Material.

Some opinions I came across:

• Angular Material: Great documentation, but limited customization.
• PrimeNG: Highly customizable but has documentation that’s a bit lacking in clarity.

After exploring PrimeNG’s components and themes, I liked what I saw and decided to go with it.

Following PrimeNG’s getting started guide, I successfully added the library to my app. It was simple and straightforward.

The Sidenav Challenge

I wanted to add a sidenav component to my app. Copy-pasting the working example from PrimeNG’s documentation seemed like a no-brainer. However, the component didn’t behave as expected.

After inspecting the component in my browser, I realized something was off:

• Some classes from the documentation example weren’t applied.
• Certain stylesheets seemed to be missing.

I tried running the StackBlitz example provided in the documentation, but it just kept downloading dependencies forever. After some debugging, I figured out that I needed to integrate Tailwind CSS into my app — a detail that was not mentioned in the documentation.

Back when I last integrated a UI component library, it was straightforward — download the dependency and add the styles by importing them in styles.scss or including them in the styles array in angular.json. Tailwind CSS, however, is a little different.

Adding Tailwind CSS

I followed documentation to add Tailwind to my app, but the steps didn’t work. Frustrated, I downloaded one of the Primeng template to understand how tailwind has been set up. The sidenav component from the template app worked perfectly. After digging deeper, I realized the issue was with my configuration. The documentation was for a standard Angular app, while mine was an NX project.

Finally, I found the correct setup process in NX’s documentation. Running the following command resolved everything:

npx nx g @nx/angular:setup-tailwind my-project

Here’s the link to the NX guide I followed: Using Tailwind CSS with Angular Projects.

Lessons Learned

This issue cost me an entire day. At one point, I considered giving up on PrimeNG and switching to Angular Material. But I stuck with it and managed to get everything working. I don’t want others to waste time on this like I did, so I’m sharing my experience.

For those interested, you can refer to this commit on GitHub, which includes the changes for PrimeNG and Tailwind configuration.

More to Come

This was just the beginning of my journey to build a side project. I’ll be sharing more errors and lessons learned along the way. Stay tuned!