Primeng not working correctly after adding Tailwindcss to Project

I tried to create a project using both tailwindcss and primeng. But after I import Tailwind, the styles of Primeng are not applied any further

I tried using the Tailwind prefix option, but as soon as I import Tailwind the styles of Primeng are not applied anymore. To rule out other reasons, I created a fresh Angular project (Angular version 16) and installed only Tailwindcss and Primeng.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
prefix: "tw-",
}


angular.json

{
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},


style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";


In the app component I have a few test divs (Primeng button and Input - Tailwind container with some styles)

After I delete the tailwindcss imports (more precisely @tailwind/base) from the style.css the primeng components have the correct style. but the tailwind styles are lost

Continue reading...