PrimeFlex not working on Angular Version 12.1.4

Question

I have installed primeFlex(Version 3.0.1) on my angular application(Version 12.1.4). I followed the instructions on their webpage primeflex.com however, was unable to fix the error. I glanced over the network Tab and found that the CSS file was retrieved however it is not being applied to my application. I am not sure how to fix it? Any help is appreciated.

Answer 1

In primeflex version greater than 3.0.0, the tag "p-" was removed, for example: class="p-grid" became class="grid".

You can notice this by opening the file in your_project/node_modules/primeflex/primeflex.css, you will see that there is no longer the "p-" tag in the classes.

If you want to continue using the tag, I recommend you install primeflex version 2.0.0, changing:

...
"primeflex": "2.0.0",
...

See

Answer 2

in primeng doc for angular 12 and above for this date (january 2022) the primeflex versin doc is 2.0 - but it install new version 3+ the docs for primeflex 3+ is https://www.primefaces.org/primeflex/