I have an application in angular 19, I added the PrimeNG and Primeflex package and now I have a problem that the styles from primeflex do not work at all, e.g. I have this code:

<div class="flex flex-row align-content-center gap-5">
  <div class="w-4 border-1 border-red-400 p-3">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id erat id quam vehicula elementum sed et
    augue. Mauris quis ante ornare, maximus diam quis, consectetur quam. Sed ut lacus eu leo viverra suscipit sed
    quis turpis. Praesent eu lobortis tellus, nec mollis eros.
  </div>
  <div class="w-4 border-1 border-blue-500 p-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id erat id quam vehicula elementum sed et
    augue. Mauris quis ante ornare, maximus diam quis, consectetur quam. Sed ut lacus eu leo viverra suscipit sed
    quis turpis. Praesent eu lobortis tellus, nec mollis eros. 
  </div>
  <div class="w-4 border-1 border-primary-500 p-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id erat id quam vehicula elementum sed et
    augue. Mauris quis ante ornare, maximus diam quis, consectetur quam. Sed ut lacus eu leo viverra suscipit sed
    quis turpis. Praesent eu lobortis tellus, nec mollis eros.
  </div>
</div>

The problem is that, for example, the border color doesn't work at all In styles file I have import

/* You can add global styles to this file, and also import other style files */
@import "primeicons/primeicons.css";
@import 'primeflex/primeflex.css';
body{
  background-color: #FFF;
  color: #444;
}

In package.json I have this packages

"@primeng/themes": "^19.0.6",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^19.0.6",

I did everything according to the documentation and I don't know where the error might be, when I remove the import from the styles file then all styles actually disappear. Any ideas?