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

Phước Phan Minh · Accepted Answer · 2023-10-17 13:10:50Z

12

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!

answered Oct 17, 2023 at 13:10

Phước Phan Minh

1362 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hossein Bajan Over a year ago

This is working fine for me, thanks man, you save my time :)

Odilbek Utamuratov Over a year ago

If it does not work You can write like this. And it works for me:

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

nani889 · Accepted Answer · 2023-10-12 05:54:11Z

6

add this into your tailwindcss.config.js :

corePlugins: { preflight: false }

I tried and did it

answered Oct 12, 2023 at 5:54

nani889

611 bronze badge

Comments

Nxtivision · Accepted Answer · 2024-01-21 10:39:04Z

0

Solutions already posted might work, however, PrimeNG has a reference for this subject in their documentation:

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

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

Doing this by reordering these layers will prevent tailwind preflight system to replace primeng styles

Source: https://primeng.org/guides/csslayer#tailwind

edited Jan 21, 2024 at 10:39

answered Jan 19, 2024 at 15:55

Nxtivision

395 bronze badges

Comments

Djinii · Accepted Answer · 2024-08-30 09:40:26Z

All the answers referencing the primeng docs didn't work for me. I was wondering why people point to the docs when it is about USING the preflight feature from tailwind ("Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate layers and make sure primeNG layer comes after the base").

If you just disable the preflight feature in the config, some classes won't work anymore (e.g. border).

If you choose the accepted answer, tailwind still changes some primeng styling (e.g. the padding of buttons).

If you want to keep all the primeng styles, disable the preflight feature in the tailwind config and add the needed preflight features for borders (and other features you like e.g. removing list styles) in your styles.css:

@import 'primeng/resources/themes/aura-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

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

// preflight borders
*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

tailwind.config.js:

corePlugins: { preflight: false },

You can add more preflight rules if you want to: https://tailwindcss.com/docs/preflight

shashoto laha · Accepted Answer · 2025-05-08 07:40:16Z

0

I am too using the tailwindcss v4 with NgPrime. soo i got fix by adding this line to the angular.json file at style section.

"styles": [
"src/styles.scss",
"./node_modules/tailwindcss-primeui/v4/index.css"
],

and style scss file should look like this.

@use 'tailwindcss';
@use 'primeicons/primeicons.css';

as you can see i am using @use because @import can't be use after new ruleset for scss or sass.It is working for me.

answered May 8 at 7:40

shashoto laha

1

Collectives™ on Stack Overflow

Primeng not working correctly after adding Tailwindcss to Project

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related