PrimeNG 19 and TailwindCSS

[coredmp95]

Hello,

On the part of the documentation, explaining the use of TailwindCSS, there is only the "html" part provide, is it possible to have the TS or even beter a Stackblitz ?

Thanks

[denisko]

I also find the documentation on how to use TailwindCSS with PrimeNG too limited to get it working without further research.

[stewieoO]

I used the files from here and also have this in my app to remove the dynamically added styles. But i agree, docs are def lacking.

export function provideNoPrimeNgStyles(): EnvironmentProviders[] {
  return [
    provideAppInitializer(() => {
      removeStylesObserver({
        selector: '[data-primeng-style-id]',
        init: {
          childList: true,
          attributeFilter: ['data-primeng-style-id']
        }
      });
    })
  ];
}


export function removeStylesObserver(options: { init: MutationObserverInit, selector: string, filter?: (node: HTMLElement) => boolean }) {
  const document = inject(DOCUMENT);
  if (!isBrowser()) {
    const applicationRef = inject(ApplicationRef);
    applicationRef.whenStable().then(() => {
      document.head.querySelectorAll(options.selector)
        .forEach(element => element.remove());
    });
    return;
  }

  const observer = new MutationObserver((e) => {
    e.forEach(r => {
      r.addedNodes.forEach((node) => {
        if ((options.filter && options.filter(node as HTMLElement)) || !options.filter)
          (node as HTMLElement).remove();
      });
    });
  });
  observer.observe(document.head, options.init);
}