PrimeNG styles are not applied when used with @tailwind base;

Question

I am working on a project using Angular and Tailwind and recently we decided to add PrimeNG to take advantage of some of the components they have. However, we realized that styles are not applied even though they are included in angular.json. When we remove our "@tailwind base;" config, then PrimeNG styles are applied. However, we need to configure our styles with @tailwind base;

Any idea on how to make PrimeNG styling work as expected when @tailwind base config is also in place?

Answer 1

When you use both PrimeNG and tailwind at the same time, you will face naming conflicts which will lead to undefined behavior, To avoid this, use the prefix option in your tailwind.config.js file

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

And now you must use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.