Question 266955 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    add this into your tailwindcss.config.js :

    corePlugins: { preflight: false }

    I tried and did it

    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search