Problem using PrimeNG with TailwindCSS

[MoInMaRvZ]

Describe the bug

When using primeng and tailwindcss together the preflight styles from tailwind overwrite the some styles from primeng.

Buttons and borders are primarily affected by this. All borders are missing. The Table is not striped with p-datatable-striped set in styleClass

Environment

I am using node 20 with angulat 17. The problem also occurs with version 16

Reproducer

No response

Angular version

17

PrimeNG version

17

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20

Browser(s)

Every Browser

Steps to reproduce the behavior

1. Create angular Project
2. Install primeng as described in primeng docs
3. Install tailwindcss as described in tailwind docs
4. Add button and inputs

Expected behavior

The PrimeNG Styles should be more important than the tailwind preflight styles. The Button should render its background colors and all borders should be displayed correct.

[dalenguyen]

Looks like it's the same as https://github.com/primefaces/primeng/issues/13757

[moohkooh]

Same issue also from my side. I create a fresh new project Angular 17, tailwind 3.4.0 and primeNG 17.1.0 e.g. Button are broken

[i-am-milap]

Try this & make sure you update your tailwind config according to your tailwind version.

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

Refrance

[BeGj]

In angular 17 when using the new builder @angular-devkit/build-angular:application and putting tailwindcss styles in a layer like:

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

@import "tailwindcss/base" layer(tailwind-base);
@import "tailwindcss/components" layer(tailwind-utilities);
@import "tailwindcss/utilities" layer(tailwind-utilities);

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

It does not automatically add new tailwindcss classes to your build when using ng serve. Instead, if you ONLY put the preflight/reset in the layer then tailwindcss will add the classes. The following fix makes it so that you dont have to restart ng serve for every tailwindcss class change

@layer tailwind-base, primeng;

@import "tailwindcss/base" layer(tailwind-base);
@tailwind components;
@tailwind utilities;

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

(not sure if this is a angular/angular-cli or a tailwindcss bug... but it's not a primeng bug)

[saiful-70]

How I solved the problem for me.

1. putting exactly this order in angular.json

// angular.json
 "styles": [
        "src/styles.scss",
        "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
        "node_modules/primeng/resources/primeng.min.css"
 ],

2. Finally in your global CSS file(official documentation)

// styles.scss
@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer primeng; //not necessary I think

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

[Triskae]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem ?

How I solved the problem for me.

1. putting exactly this order in angular.json

// angular.json
 "styles": [
        "src/styles.scss",
        "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
        "node_modules/primeng/resources/primeng.min.css"
 ],

2. Finally in your global CSS file(official documentation)

// styles.scss
@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer primeng; //not necessary I think

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

[luismejia1]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem ?

How I solved the problem for me.

1. putting exactly this order in angular.json

// angular.json
 "styles": [
        "src/styles.scss",
        "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
        "node_modules/primeng/resources/primeng.min.css"
 ],

2. Finally in your global CSS file(official documentation)

// styles.scss
@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer primeng; //not necessary I think

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

Responsive styles work for me after implement this solution, the only difference is that apart from all that, I added a prefix in tailwind.config.js file:

[paelsam]

I solved the problem by changing the order of the primeng imports

/* Tailwind CSS */

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

/* Primeng Settings */
@import "primeng/resources/primeng.css";
@import "primeng/resources/themes/mira/theme.css";
@import "primeicons/primeicons.css";

@layer tailwind-base {
    @tailwind base;
}

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

[Stephan-MC]

i found a solution which works for me on angular 17.3

// src/styles.scss

/* You can add global styles to this file, and also import other style files */
@layer tw-base, primeng, tw-components, tw-utilities, tw-variants;

// Please take note of the order in which these are imported
@import "tailwindcss/base.css" layer(tw-base);
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/tailwind-light/theme.css";
@import "primeicons/primeicons";
@import "tailwindcss/components.css" layer(tw-components);
@import "tailwindcss/utilities.css" layer(tw-utilities);
@import "tailwindcss/variants.css" layer(tw-variants);

@layer tw-base {
  * {
    @apply transition-all duration-300 ease-in-out;
  }
}

@layer tw-components {
    // tailwind component classes here
}

@layer tw-utilities {
    // tailwind utitlity classes here
}

the image below shows the order of each layer in the browser

[flier268]

It is easy to use: https://primeng.org/guides/csslayer#tailwind

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

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

And, Add preflight: false to corePlugins

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

[dilincoln]

This one seems to fit the best solution because in the case that we set preflight to false, we lost some CSS Reset Utilities from Tailwind.

i found a solution which works for me on angular 17.3

// src/styles.scss

/* You can add global styles to this file, and also import other style files */
@layer tw-base, primeng, tw-components, tw-utilities, tw-variants;

// Please take note of the order in which these are imported
@import "tailwindcss/base.css" layer(tw-base);
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/tailwind-light/theme.css";
@import "primeicons/primeicons";
@import "tailwindcss/components.css" layer(tw-components);
@import "tailwindcss/utilities.css" layer(tw-utilities);
@import "tailwindcss/variants.css" layer(tw-variants);

@layer tw-base {
  * {
    @apply transition-all duration-300 ease-in-out;
  }
}

@layer tw-components {
    // tailwind component classes here
}

@layer tw-utilities {
    // tailwind utitlity classes here
}

the image below shows the order of each layer in the browser

[11Firefox11]

@Stephan-MC 's solution worked for me too. Only thing I had to change was to put the .css file extension at the end of the line containing primeicons.

[gitadam0]

corePlugins: { preflight: false }

why add the preflight

because just adding this to my css file is enough

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

@layer tailwind-base {
  @tailwind base;
}

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

[BeGj]

i found a solution which works for me on angular 17.3

// src/styles.scss

/* You can add global styles to this file, and also import other style files */
@layer tw-base, primeng, tw-components, tw-utilities, tw-variants;

// Please take note of the order in which these are imported
@import "tailwindcss/base.css" layer(tw-base);
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/tailwind-light/theme.css";
@import "primeicons/primeicons";
@import "tailwindcss/components.css" layer(tw-components);
@import "tailwindcss/utilities.css" layer(tw-utilities);
@import "tailwindcss/variants.css" layer(tw-variants);

@layer tw-base {
  * {
    @apply transition-all duration-300 ease-in-out;
  }
}

@layer tw-components {
    // tailwind component classes here
}

@layer tw-utilities {
    // tailwind utitlity classes here
}

the image below shows the order of each layer in the browser

I just started a new angular 18.1 project today and incredibly enough I ran into problems with tailwindcss and primeng layers once again. The tailwindcss preflight removed all button characteristics. This quoted response was the ONLY solution among all the various threads on the topic that solved it. Not sure why tho..

[thatoneprogrammer111]

I am on Angular 18.0.3 and I've tried everything I could find, yet nothing worked. The only thing that worked for me (after A LOT of trial and error) is this:

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

You can put anything in layer(prime), so layer(abc) also works. I cannot tell you why this works, but it does (at least for me).

EDIT: After some more testing, you can name the tailwind layer anything you want as well.

[gitadam0]

I am on Angular 18.0.3 and I've tried everything I could find, yet nothing worked. The only thing that worked for me (after A LOT of trial and error) is this:

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

You can put anything in layer(prime), so layer(abc) also works. I cannot tell you why this works, but it does (at least for me).

EDIT: After some more testing, you can name the tailwind layer anything you want as well.

good luck did you try my solution right above:

https://github.com/primefaces/primeng/issues/14255#issuecomment-2166916267