Compatibility issue between TailwindCSS and PrimeNG libraries

user_11433181 0
Viewed 1316

I have an Angular 9 project with TailwindCSS install on it and working together sucessfully.

I need some PrimeNG library utilities and I have just install on my Angular 9 + TailwindCSS project, but when I add the styles to the angular.json file it overrides my TailwindCSS utilities and styles, but If I don't add the primeng theme file, the primeng library components are not rendered in a correct way.

At the end, all I need is to render all my Angular custom components with the TailwindCSS styles and classes, but only the component that uses PrimeNG library components will be using the PrimeNG theme styles and classes.

The styles.scss and the angular.json files have the following @apply directives and style association:

angular.json file

"assets": [
    "src/favicon.ico",
    "src/assets"
 ],
"styles": [
    "./node_modules/primeicons/primeicons.css",
    "./node_modules/primeng/resources/themes/nova-light/theme.css",
    "./node_modules/primeng/resources/primeng.min.css",
    "src/styles.scss"
]

styles.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

I tried reordering the style.scss file in the angular.json file, without success.

tailwind-css primeng angular
1 Answers

I had the same problem yesterday, so as I just increment the specificity to my Tailwind CSS classes to apply my .magic-class. I used @apply directive from my Tailwind compilation file, and import in my angular styles.css. In this case I had to apply! Important because without it the changes are not applied.

p-menubar div.magic-class p-menubarSub ul li a span.p-menuitem-text {
  @apply text-blue-700 !important;
}

And then, add your .magic-class into styleClass of component.

<p-menubar
  styleClass="magic-class"
  [model]="items"
></p-menubar>

You can find your completely path in the developer tools.

PrimeNg MenuBar before

PrimeNg MenuBar with .magic-class

user_127630020
Related