search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.59k stars 4.62k forks source link

Problem using PrimeNG with TailwindCSS #14255

Open MoInMaRvZ opened 11 months ago

MoInMaRvZ commented 11 months ago

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 commented 11 months ago

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

moohkooh commented 11 months ago

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

image
i-am-milap commented 11 months ago

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 commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

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"
 ],
  1. 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 commented 8 months ago

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"
 ],
  1. 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:

image

paelsam commented 8 months ago

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 commented 7 months ago

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 image

flier268 commented 7 months ago

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 commented 6 months ago

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 image

11Firefox11 commented 5 months ago

@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 commented 5 months ago 
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 commented 4 months ago

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 image

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 commented 3 months ago

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 commented 3 months ago

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

phalla-doll commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 https://github.com/primefaces/primeng/issues/14255#issuecomment-2166916267

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

gitadam0 commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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