Primeng not working correctly after adding Tailwindcss to Project

Question

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

Answer 1

Modify your style.css like this:

@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";

I tried and it's worked for me!

Answer 2

add this into your tailwindcss.config.js :

corePlugins: { preflight: false }

I tried and did it