[Solved] Primeng not working correctly after adding Tailwindcss to Project – Css

The Problem:

I’m trying to integrate Primeng and Tailwindcss in an Angular project. However, after importing Tailwind, the Primeng styles cease to function. Even with the ‘prefix’ option applied to Tailwind, Primeng styles remain broken. I isolated the issue by creating a new project with just Tailwindcss and Primeng, but the problem persists. The styles.css file includes the appropriate Primeng imports, but as soon as I add @tailwind/base, Primeng’s styles break again.

The Solutions:

Solution 1: Import TailwindCSS files using the layer() function

In your style.css file, modify the way you import TailwindCSS files. Instead of using the traditional @tailwind base, @tailwind components, and @tailwind utilities directives, import them using the layer() function.

Here’s an example of the updated style.css file:

@import "tailwindcss/base" layer(tailwindcss);
@import "tailwindcss/components" layer(tailwindcss);
@import "tailwindcss/utilities" layer(tailwindcss);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

Using the layer() function ensures that the TailwindCSS styles are applied correctly and do not interfere with the Primeng styles.

Solution 2: Disable preflight classes

In your `tailwind.config.js` file, add the following line:

corePlugins: { preflight: false }

This will disable the generation of preflight classes, which are used to reset styles for certain elements. This can cause conflicts with the styles provided by PrimeNG. By disabling preflight classes, you can ensure that the PrimeNG styles are applied correctly.

Solution 3: Prioritize CSS Layers

Primeng offers a specific solution for this issue in their documentation.

By reordering the CSS layers, you can ensure that Tailwind’s preflight system doesn’t override Primeng’s styles. Here’s how you can do it:

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

This approach will prevent Tailwind’s preflight system from interfering with Primeng’s styles and ensure that your Primeng components are styled correctly.

Solution 4: Using CSS Layers

Primeng provides a clean way to style your components using CSS Layers. Here’s the updated `styles.css` file:

@layer tailwind-base, primeng, tailwind-utilities;
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

• The @layer rule defines the order in which CSS rules are applied. In this case, we’ve added three layers: tailwind-base, primeng, and tailwind-utilities.
• The primeng layer imports the Primeng CSS files, ensuring that its styles are applied before Tailwind’s.
• Inside the tailwind-base and tailwind-utilities layers, we import the Tailwind base and utilities, respectively.

With this setup, Primeng’s styles take precedence over Tailwind’s, while Tailwind’s utilities and components are still available for use.

Video Explanation: