Application styles broke after updating to primeng 16.4.0 from 16.3.1

[adri95cadiz]

Describe the bug

After updating to primeng 16.4.0 the styles for the p-button, p-menu and a p-card that I noticed were not working.

Apparently it's related to the primeng lara-light-blue theme, for the moment we have reverted to the version 16.3.1 until the issue is solved.

This issue is also apparent in the primeng.org as website is also looking broken

Environment

It's a enterprise Angular application with the latest versions of primeng and angular, and versions 0.13.3 of zone.js and 5.1.6 of typescript because the latest are not supported.

I have tried to reproduce the issue in stackblitz but the template is broken and i cannot make it work.

Reproducer

No response

Angular version

16.2.6

PrimeNG version

16.4.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

Chrome 116.0

Steps to reproduce the behavior

No response

Expected behavior

No response

[tomer953]

yes same here
downgrading to 16.3.1 works

[WynieCronje]

Seems like the css @layer primeng got introduced and broke importance of styles.

[sebastienchevriaupro]

It can be managed by adding this in the main css file :
@layer base, primeng, app;
base : for me it's a reset css (padding = margin = border = 0)
primeng : the one coming with primeng
app: specific css over primeng

[cetincakiroglu]

Could you please clear browser cache and try again

[tomer953]

The styling issues solved in my case by removing css reset code I have, something like:

// css reset
* {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

[SoyDiego]

I had the same problem and clearing the cache (Ctrl+F5 in Firefox or Ctrl+Shift+Delete in Chrome) fixed the problem.

[adri95cadiz]

I tried to clear cache, but it probably has to do with these things:

Seems like the css @layer primeng got introduced and broke importance of styles.

It can be managed by adding this in the main css file : @layer base, primeng, app; base : for me it's a reset css (padding = margin = border = 0) primeng : the one coming with primeng app: specific css over primeng

We use reset.css, prime-flex and global styles on top of primeng so probably it will have to do with that.

Tomorrow I will try these fixes and update if it works.

[adlaonmd]

I can't confirm for everyone but the default sidebar close icon moved from right to left. It causes styling issue on my end, especially in combination with custom header template.

Downgrading from 16.4.0/16.4.1 to 16.3.1 works. I found that there is something off with the CSS in the latest version.

I cannot send an image right now but I'll update again if needed.

[SoyDiego]

I don't know if is good idea but someone has created a new post in Discussions about some issues or bugs.
Maybe we can replicate all in one place or is better in different posts?
This is the post: https://github.com/orgs/primefaces/discussions/130

Thanks

[psarno]

Updating from 16.3.1 to 16.4.1 broke layout.

This is using the CSS and theme from the Cloudflare CDN.

Impacting all themes.

https://cdnjs.cloudflare.com/ajax/libs/primeng/16.4.1/resources/primeng.css

[kuhnlud]

Same here, I updated from PrimeNG 15 to latest version of 16, And many style has broke. I try to resolved it one by one, but It is annoying to see so much difference between two version.

[WynieCronje]

Maybe this should be reverted. And treated as a major update. Since it breaks for many users. Not something that is expected in a minor release

[kent-hervey]

Same here....

[bytebruno]

In my point of view this is a major update as well. Any updates on this topic?

[sebastienchevriaupro]

As I said earlier, you need to use CSS layers now if you want to put some CSS styles before Prime CSS ones

[bytebruno]

Your solution works for your scenario. What do you do if you have css imported on your angular.json related to other packages that doesn't use css layers? Maybe I'm missing something, but even if I "force" to apply layers in any imported css, I still lose the current style due to the specificity of css being applied to the scope of the css layer. Even if we decide to remove or refactor other dependencies to fix this, the truth here is that this update breaks the current styles and should be treated as a breaking change. Anyways, regardless the version number, we are not updating this until getting a clearer vision of what needs to be done to make this work with other dependencies.

[pete-mcwilliams]

angular.json styles seem to keep the ordering specified so might be able to specify primeng import after the import of the file containing the @layer layer1, layer2 line which needs to be before any other @layer. We moved the import inside an scss file to try to take control of layer ordering.

Current tailwind versions do not support layers as css layers, which caused us some issues. @import css in scss adds the css to top of output css files... primeng layers would be the first layer and adding css layer ordering to theme file for project would have no effect. We have worked around these issues pulling together some information from issues on tailwind etc. tailwindlabs/tailwindcss#6694 (reply in thread)

I include our theme.scss which solves the layer ordering and tailwind missing layers, which might assist others working around the issue here. meta.load-css seems to keep the imports in correct order.

I would also classify this as a breaking change

@use 'sass:meta';

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

/**
 * Inject tailwind files inside layers so that primeng can be ordered correctly in the css layers. tailwind v4 may add layers and this will need to be looked at again.
 * https://github.com/tailwindlabs/tailwindcss/discussions/6694#discussioncomment-4716568
 */

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}
@tailwind utilities;
// not used yet but might be required in future @tailwind variants;

@import './app-base';

@include meta.load-css('../../../../../node_modules/primeng/resources/primeng.min');

@import './app-components';
@import './app-utilities';

[BeGj]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt.
Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight).
p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css.

Has anyone else got this issue and may solve it?

[pete-mcwilliams]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt. Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight). p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css.

Has anyone else got this issue and may solve it?

tailwind is not in layers primeng is, primeng styles will be overwritten by anything not in layers, check my suggestion to solve your issue immediately above your post.

[BeGj]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt. Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight). p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css.
Has anyone else got this issue and may solve it?

tailwind is not in layers primeng is, primeng styles will be overwritten by anything not in layers, check my suggestion to solve your issue immediately above your post.

Thanks for the reply. I've tried wrapping the tailwindcss base in a layer, but the problem persists.
For instance is the .p-inputtext class overwritten by tailwindcss base "[type='text']" selectors.. making all input boxes completely white and squared.

edit: Using vela-orange theme btw!

[BeGj]

Alright, so I solved it on my end. Inspired by @pete-mcwilliams reply above and this link https://css-tricks.com/css-cascade-layers/

Here's my styles.css (manually copied over by writing so I apologize for any typos):

@layer tw-base, primeng, tw-components, tw-utilities;


@import(../../node_modules/tailwindcss/base.css) layer(tw-base);
@import(../../node_modules/tailwindcss/components.css) layer(tw-components);
@import(../../node_modules/tailwindcss/utilities.css) layer(tw-utilities);


// other imports in between here such as openlayers...


@import 'customized-primeng-theme.css';
@import '../../node_modules/primeng/resources/primeng.min.css';
@import '../../node_modules/primeicons/primeicons.css';

For some reason it worked with @import(../../node_modules/tailwindcss/base.css) layer(tw-base); and not with @layer tailwind-base { @tailwind base; }

[MussaratAziz]

any update on this issue? i tried above suggestions none worked for me. Thanks everyone

[pete-mcwilliams]

Not much to go on Mussarat, in chrome inspect click on the primeng layer, you should see some ordering of the layers in your app. as shown in image... primeng should not be the only one or be at the top if you are using tailwind, generally layer specificity changes the order of your css which is what you have to work through.

[1c3f0x84]

any update on this issue? Can't upgrade version :(

[adlaonmd]

Just my own update for this one. Turns out the @layer primeng messes with the normalize.css that I use. I decided to just get rid of it and I don't have any issues with the layouts anymore.

There's also some few changes like the outlined button not being styled using the class anymore but with a [outlined]="true" property. Other than that, everything seems good.

I also use the dynamic theme switching and I don't see any issues with it.

[admt1]

Same here with Saga Blue theme

[Romi1122]

Have the same issue. It seems like the importance of stylesheets from the node modules switched.

In my case, a p-datatable got the style first from "theme.css" of my primeng theme nova, then from "_reboot.scss" from bootstrap.
After updating 16.3.1 to 16.4.0<, the style of "_reboot.scss" is more important than the style of "theme.css", so the table lost border settings.

[joshnarwold]

Similar issue here. My team is upgrading from 14.2 to 16.4.

Previously, the base theme styles in the node_modules → primeng folder couldn't seem to be overridden except by using greater specificity in the theme.

Now, the Designer/theme styles for .p-button are overridding the much more specific selector .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up styles from the base CSS, so the up and down arrows in my InputNumber component have rounded corners all the way around instead of just in the top right and bottom right corners of the field.

The inspector in Chrome shows all my theme styles at the top and then the base CSS as falling under some other layer: "Layer primeng".

I had the person working on this switch the version to 16.0.2 (this was recommended a couple places online), but we're still facing the same issue. Any other ideas?

[BeGj]

Guys read the responses above. U need to put ur CSS reset in a layer so it doesn't overwrite primeng.

[andykurz]

I managed to find a workaround for our project.
The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css.
If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file.
The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

Hey, I was doing the same this and it worked for me but As I continued my development, I came across the issue that by default bootstrap's _utilities styles have !important so to remove that we need to do something like this:

styles.scss

$enable-important-utilities: false; // this prevents bootstrap from applying !important in utility classes.
@import "bootstrap/scss/bootstrap.scss";

What it will do is when angular compiles bootstrap.scss , since I have set a value $enable-important-utilities to false it will not generate _utilities with !important.

so, my question is how I can import bootstrap's scss as layer.

Any ideas i have the same problem.

[krunal-jethva-tark]

I managed to find a workaround for our project.
The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css.
If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file.
The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

Hey, I was doing the same this and it worked for me but As I continued my development, I came across the issue that by default bootstrap's _utilities styles have !important so to remove that we need to do something like this:
styles.scss

$enable-important-utilities: false; // this prevents bootstrap from applying !important in utility classes.
@import "bootstrap/scss/bootstrap.scss";

What it will do is when angular compiles bootstrap.scss , since I have set a value $enable-important-utilities to false it will not generate _utilities with !important.
so, my question is how I can import bootstrap's scss as layer.

Any ideas I have the same problem.

Despite many efforts, we haven’t yet found a solution to this issue.Currently, the application I was developing consists of a simple 2-3 page UI for handling secondary admin-related tasks. And my team and client were primarily concerned with functionality rather than the UI. So, I overlooked the fact that _utilities comes with the !important flag and tried to develop very simple UI.

And in main project where there's some complex UI and component. Our team has decided to not update prime-ng version until we found some solution, Since our main application is quite stable and doesn't need latest features.

So, my suggestion is do the same. P.S. I have not gone through a feature prime-ng is offering in versions after 16.4.0

[ThoSap]

If this documentation is not sufficient for the community needs then the PrimeTek team needs to improve this documentation:
https://primeng.org/guides/csslayer

[saiful-70]

Looks like same issue #14255
You can try this solution

[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 @francoisrob ?

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

~Primeng docs - CSS Layer - Tailwind

[BeGj]

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 @francoisrob ?

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

~Primeng docs - CSS Layer - Tailwind

#13757 (comment) / #14255 (comment)
Is it the same as this issue i mentioned above? 🤔

[francoisrob]

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 @francoisrob ?

This worked for me on "primeng": "^17.5.0"
Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

~Primeng docs - CSS Layer - Tailwind

To me everything works including responsive utilities.
I'm using [email protected] and [email protected]

[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 @francoisrob ?

This worked for me on "primeng": "^17.5.0"
Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

~Primeng docs - CSS Layer - Tailwind

#13757 (comment) / #14255 (comment) Is it the same as this issue i mentioned above? 🤔

Exactly the same, working now, thank you very much !!

Maybe the primeng version need to be changed to match this comment, since the problem seems to be introduced by vite right ?

Thank you very much !

[mylifeandcode]

Current version of PrimeNG is 17.9 at the time I'm writing this, and the issue still remains. Not all of us are using Tailwind, so the Tailwind-specific approaches above don't apply.

[mjsprengers]

I solved it like this:

@layer tailwind, primeng;
@layer tailwind {
  @import "./tailwind/theme";
  @tailwind base;
}
@layer primeng {
  @import "primeng/resources/primeng";
}
...
@tailwind components;
@tailwind utilities;

The theme contains our designer ngprime components (e.g. tags)

[leogouveia]

Hi there,
Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken.
It would be nice if there was a way to use a retro-compatible theme without @layers.
Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

[tomavic]

Hi there, Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken. It would be nice if there was a way to use a retro-compatible theme without @layers. Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

Indeed! This needs to be explained in the documentation as it will be the direct way to customise your theme.

[tomavic]

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

This worked for me for v16.x and v17.x
This setup will give tailwind high specificity as well as include the primeng theme files.

[MykhayloZelisko]

My working configuration for v17.x with style=scss. It doesn't work without @layer primeng wrapper

@use "sass:meta";

@layer default, primeng;

@layer default {    // my custom styles
  @include meta.load-css("reset");
  @include meta.load-css("fonts");
}

@layer primeng {
  @include meta.load-css("primeng/resources/themes/lara-light-blue/theme.css");
  @include meta.load-css("primeng/resources/primeng.css");
}

[silvelo]

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

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

~Primeng docs - CSS Layer - Tailwind

This work for me with angular@^17,primeng@^17 and tailwind@^3.4, now the problem is with cloudflare and auto minify, this utility trim white spaces of layer css properties, causing them to break styles. The solution for now is to disable the option in cloudflare.

[GitStorageOne]

Doesn't work

Angular 17.3.6   
PrimeNG 17.15.0   
Bootstrap v5.3.3   
Firefox 125.0.2  

angular.json

"styles": ["src/assets/test.css"]

test.css

@layer bootstrap-reboot, primeng;
@import "../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css" layer(bootstrap-reboot);

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

From browser I can see, that resulting CSS includes layers:

@layer bootstrap-reboot, primeng;

/* node_modules/bootstrap/dist/css/bootstrap-reboot.min.css */
@layer bootstrap-reboot {
  /*!
   * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
   * Copyright 2011-2024 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
  :root,
  [data-bs-theme=light] {
    --bs-blue:#0d6efd;
AND SO ON
@layer primeng {
  .p-component,
  .p-component * {
    box-sizing: border-box;
  }
  .p-hidden {
    display: none;
  }
AND SO ON

[johnscott999]

I had this issue with a fresh stack blitz angular instance:
Working Demo

I tried using layers, and preflight was still getting prioritized over prime ng. when I opened up the generated CSS from the angular build, I found the layer declarations were getting set above the order declaration.

global_styles.css

/* Add application styles & imports to this file! */
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

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

@layer tailwind-base {
  @tailwind base;
}

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

output.css

@layer primeng {
 /* rules here */
}

@layer tailwind-base, primeng, tailwind-utilities

@layer tailwind-base {
  /* rules here */
}

because layers are ordered in the order they are declared in, and the ordered layer statement is at the bottom of the output, that statement does not change the order of the layer. I suspect if putting the layer statement above the import statements was valid CSS, that would fix the problem, but that's invalid css.

fix was to split the global_styles.css doc into two, one to declare the layers and order them, then the second to modify the layers with their respective rules:

layers.css

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

global_styles.css

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

@layer tailwind-base {
  @tailwind base;
}

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

finally, I had to add the new CSS file to the angular.json architect.build.options.styles

// ...
"options" : {
  // ...
  //            vvvvvvvvvvvvvvvvvv <- add this, make sure it's before the global styles so it gets declared first
  "styles": ["src/css-layers.css", "src/global_styles.css"],
  // ...

[JacobSiegle]

Not sure if mentioned anywhere but sounds like it will be a config option in v18 - https://www.reddit.com/r/Angular2/comments/1cvn2zp/comment/l4s7llk/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[liorstezki]

Please add an option to use PrimeNG without layers. We're using both Bootstrap and PrimeNG, and the layers are breaking many of our styles.

[ThoSap]

@liorstezki I think that is the plan for PrimeNG v18.0.0, see the PrimeVue implementation:
https://v4.primevue.org/theming/styled/#csslayer
https://primeng.org/roadmap

[IreneTepe]

Please add an option to use PrimeNG without layers. We're using both Bootstrap and PrimeNG, and the layers are breaking many of our styles.

Same!

[pferrariog]

The styling issues solved in my case by removing css reset code I have, something like:

// css reset
* {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

you put this in styles.css?

im having problem with this base border that i can't override in styles.css

[kkeld]

Not sure if mentioned anywhere but sounds like it will be a config option in v18 - https://www.reddit.com/r/Angular2/comments/1cvn2zp/comment/l4s7llk/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

Oh. My. God.

This is a very crucial information that needs to be declared on their website, not on Reddit geez...

[atamansv]

Hi there, Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken. It would be nice if there was a way to use a retro-compatible theme without @layers. Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

Same. We are limited by Chrome 79, and objectevely there are at least 2% of browsers that don't support @layer https://caniuse.com/css-cascade-layers
Currently unable to find a way to polyfill in an angular project

[cagataycivici]

How about we do an update that offer a theme.css with no layers. So each team has two modes; theme.css theme-nolayer.css.

Please note that, in v18 everything is reactive and dynamic, there is no theme.css and cssLayer is just a config as in.

https://primevue.org/theming/styled/#options

[JacobSiegle]

@cagataycivici that would be great as temp solution. Would be very interested in using that fix or just primeng 18, whichever lands first.

[skappler]

How about we do an update that offer a theme.css with no layers. So each team has two modes; theme.css theme-nolayer.css.

Please note that, in v18 everything is reactive and dynamic, there is no theme.css and cssLayer is just a config as in.

https://primevue.org/theming/styled/#options

This would be highly appreciated. Can you give us an estimation on when there will be either this fix or v18?

[JacobSiegle]

I've had 0 luck trying to get any sort of layering working in my project based on comments in this thread / others but with v18 beta it does finally work passing opts -

        this.config.theme.set({
            preset: Aura,
            options: {
                prefix: 'p',
                darkModeSelector: '.dark-mode-disabled',
                cssLayer: {
                    name: 'primeng',
                    order: 'tailwind-base, primeng, primeng-custom, tailwind-utilities'
                }
            }
        }); 

I'm not sure if it's possible to use layering 'false' if you need your CSS in any specific order because the primeng theme is setup in the app now so I don't know how you could place it in correctly as you might have before.

Hoping the material theme will drop soon, the theming is a bit of a tough one out of the gate with what is being provided in the beta (but its beta, I get it) to get something similar to what I had before up and running. Looking for to trying to customize some components with the new options this provides!

[cagataycivici]

We tried but not able to do anything for v17 I'm afraid, if we revert it, we'll break it once again. To reiterate, it was a mistake on my end to enable it by default. Lessons learned and new theming makes it configurable, default is false.

https://v18.primeng.org/theming#configuration