What does the @layer directive do?

@layer lets you group styles into layers and control the order in which they apply, independent of their order in the file. This is needed to precisely control which styles should override others, for example base styles, components, and utilities.

Example of layer logic:

Even if utilities is declared at the start of the file, it will still outweigh base and reset, because that is how the layer order is defined.

The point: @layer gives a predictable cascade and makes overriding styles in large projects easier.