A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.
The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. In styled mode, PrimeVue wraps the built-in style classes under the primevue cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
Layers also make it possible to use CSS Modules, view the