Problem using PrimeNG with TailwindCSS #14255

MoInMaRvZ · 2023-11-30T10:59:05Z

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

Create angular Project
Install primeng as described in primeng docs
Install tailwindcss as described in tailwind docs
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 · 2023-12-01T02:00:12Z

Looks like it's the same as #13757

moohkooh · 2023-12-20T09:23:39Z

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 · 2023-12-25T10:47:35Z

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 · 2024-01-11T14:03:35Z

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 · 2024-02-14T04:41:39Z

How I solved the problem for me.

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"
 ],

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 · 2024-02-21T17:50:09Z

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.

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"
 ],

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 · 2024-03-21T17:40:00Z

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.

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"
 ],
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 · 2024-03-27T15:54:18Z

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 · 2024-04-05T13:42:14Z

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 · 2024-04-25T07:48:06Z

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 · 2024-05-17T16:34:25Z

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 · 2024-06-05T19:53:20Z

@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 · 2024-06-13T22:48:53Z

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 · 2024-07-14T21:18:22Z

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 · 2024-08-12T09:17:34Z

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 · 2024-08-13T23:39:17Z

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:

#14255 (comment)

phalla-doll · 2024-09-06T10:25:53Z

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:

#14255 (comment)

Thanks @gitadam0 , your solution worked on my project as well (v17) but dynamic theming will be a pain in the butt.

thatoneprogrammer111 · 2024-09-09T07:20:54Z

Hey again, so I solved most of my issues with 1 thing:
I accidentally loaded it twice, once in the styles.css, and directly through the angular.json.
If anyone encounters this in the future: Try to only load the styles.css in your angular.json

somq · 2024-09-11T01:40:16Z

Found another workaround since tailwind base was also clashing with primeng for us; ugly but does the job.

I simply reverted the tailwind base layer that was overwriting primeng classes with all: revert-layer !important;.

@layer tailwind, prime;

@import 'tailwindcss/base.css' layer(tw-base);

@import 'assets/layout/styles/layout/layout.scss' layer(prime);
@import 'primeicons/primeicons.css' layer(prime);

@import 'assets/layout/styles/theme/tailwind/tailwind-light/theme.scss' layer(prime);
@import 'primeng/resources/primeng.css';

@import 'tailwindcss/components.css' layer(tw-components);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import 'tailwindcss/variants.css' layer(tw-variants);

@layer tw-base {
  [type='text'],
  [type='email'],
  [type='url'],
  [type='password'],
  [type='number'],
  [type='date'],
  [type='datetime-local'],
  [type='month'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='week'],
  [multiple],
  textarea,
  select {
    all: revert-layer !important;
  }
}

Works for the datatable for now, will probably run into more surprises when we get into the implementation of other primeng components...

gitadam0 · 2024-09-12T19:48:35Z

Found another workaround since tailwind base was also clashing with primeng for us; ugly but does the job.

I simply reverted the tailwind base layer that was overwriting primeng classes with all: revert-layer !important;.
@layer tailwind, prime;

@import 'tailwindcss/base.css' layer(tw-base);

@import 'assets/layout/styles/layout/layout.scss' layer(prime);
@import 'primeicons/primeicons.css' layer(prime);

@import 'assets/layout/styles/theme/tailwind/tailwind-light/theme.scss' layer(prime);
@import 'primeng/resources/primeng.css';

@import 'tailwindcss/components.css' layer(tw-components);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import 'tailwindcss/variants.css' layer(tw-variants);

@layer tw-base {
  [type='text'],
  [type='email'],
  [type='url'],
  [type='password'],
  [type='number'],
  [type='date'],
  [type='datetime-local'],
  [type='month'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='week'],
  [multiple],
  textarea,
  select {
    all: revert-layer !important;
  }
}
Works for the datatable for now, will probably run into more surprises when we get into the implementation of other primeng components...

nice workaround
this was my solution I'm pretty sure it works for all components
#14255 (comment)

and you can look in this page:
https://v18.primeng.org/tailwind#override

gitadam0 · 2024-09-12T19:52:16Z

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:
#14255 (comment)
Thanks @gitadam0 , your solution worked on my project as well (v17) but dynamic theming will be a pain in the butt.

no problem brother, what do you mean by dynamic theming

jmpussacq · 2024-10-07T13:56:23Z

Hello,

If you've encountered issues with the order of CSS layers when using PrimeNG, avoid using both .scss and .css files simultaneously.

Make sure not to import files with the .css extension for PrimeNG (or for other libraries, if applicable). This is because SASS will import .css files before .scss files

For example in your styles.scss file :

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

@layer tailwind-base {
  @tailwind base;
}

@import "primeng/resources/themes/bootstrap4-light-blue/theme";
@import "primeng/resources/primeng";

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

@layer my-app {
  @import 'styles/custom';
}

I hope this helps ! :)

phalla-doll · 2024-10-22T01:52:15Z

How do you switch between themes (light/dark)? Because using "@import" is not dynamic.

docentYT · 2024-12-30T17:57:45Z

Tailwind preflight still overrides primeng classes in 19.0.2.

My app.config.ts:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { providePrimeNG } from 'primeng/config';
import { LocalePl } from './primeng.pl.locale';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
    provideAnimations(),
    provideHttpClient(withFetch()),
    providePrimeNG({
      ripple: true,
      translation: LocalePl,
      theme: {
        preset: Aura,
        options: {
          cssLayer: {
              name: 'primeng',
              order: 'tailwind-base, primeng, tailwind-utilities'
          },
      }

      }
    })
  ],
};

styles.scss:

@import 'primeicons/primeicons.css';
@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}

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

// import Quill styles in styles.scss
@import 'quill/dist/quill.core.css';
@import 'quill/dist/quill.snow.css';

MoInMaRvZ added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 30, 2023

BeGj mentioned this issue Jan 11, 2024

Application styles broke after updating to primeng 16.4.0 from 16.3.1 #13757

Closed

mertsincan added question Issue contains a question about the use of PrimeReact components or the products it supports and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 4, 2024

mertsincan closed this as completed Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem using PrimeNG with TailwindCSS #14255

Problem using PrimeNG with TailwindCSS #14255

MoInMaRvZ commented Nov 30, 2023

dalenguyen commented Dec 1, 2023

moohkooh commented Dec 20, 2023

i-am-milap commented Dec 25, 2023 •

edited

Loading

BeGj commented Jan 11, 2024 •

edited

Loading

saiful-70 commented Feb 14, 2024

Triskae commented Feb 21, 2024

luismejia1 commented Mar 21, 2024

paelsam commented Mar 27, 2024

Stephan-MC commented Apr 5, 2024 •

edited

Loading

flier268 commented Apr 25, 2024

dilincoln commented May 17, 2024

11Firefox11 commented Jun 5, 2024

gitadam0 commented Jun 13, 2024 •

edited

Loading

BeGj commented Jul 14, 2024

thatoneprogrammer111 commented Aug 12, 2024 •

edited

Loading

gitadam0 commented Aug 13, 2024

phalla-doll commented Sep 6, 2024

thatoneprogrammer111 commented Sep 9, 2024

somq commented Sep 11, 2024 •

edited

Loading

gitadam0 commented Sep 12, 2024 •

edited

Loading

gitadam0 commented Sep 12, 2024

jmpussacq commented Oct 7, 2024

phalla-doll commented Oct 22, 2024

docentYT commented Dec 30, 2024

Problem using PrimeNG with TailwindCSS #14255

Problem using PrimeNG with TailwindCSS #14255

Comments

MoInMaRvZ commented Nov 30, 2023

Describe the bug

Environment

Reproducer

Angular version

PrimeNG version

Build / Runtime

Language

Node version (for AoT issues node --version)

Browser(s)

Steps to reproduce the behavior

Expected behavior

dalenguyen commented Dec 1, 2023

moohkooh commented Dec 20, 2023

i-am-milap commented Dec 25, 2023 • edited Loading

BeGj commented Jan 11, 2024 • edited Loading

saiful-70 commented Feb 14, 2024

Triskae commented Feb 21, 2024

luismejia1 commented Mar 21, 2024

paelsam commented Mar 27, 2024

Stephan-MC commented Apr 5, 2024 • edited Loading

flier268 commented Apr 25, 2024

dilincoln commented May 17, 2024

11Firefox11 commented Jun 5, 2024

gitadam0 commented Jun 13, 2024 • edited Loading

BeGj commented Jul 14, 2024

thatoneprogrammer111 commented Aug 12, 2024 • edited Loading

gitadam0 commented Aug 13, 2024

phalla-doll commented Sep 6, 2024

thatoneprogrammer111 commented Sep 9, 2024

somq commented Sep 11, 2024 • edited Loading

gitadam0 commented Sep 12, 2024 • edited Loading

gitadam0 commented Sep 12, 2024

jmpussacq commented Oct 7, 2024

phalla-doll commented Oct 22, 2024

docentYT commented Dec 30, 2024

i-am-milap commented Dec 25, 2023 •

edited

Loading

BeGj commented Jan 11, 2024 •

edited

Loading

Stephan-MC commented Apr 5, 2024 •

edited

Loading

gitadam0 commented Jun 13, 2024 •

edited

Loading

thatoneprogrammer111 commented Aug 12, 2024 •

edited

Loading

somq commented Sep 11, 2024 •

edited

Loading

gitadam0 commented Sep 12, 2024 •

edited

Loading