: Where overlay class name selector style issue

[weeptao]

Summary

In NextJS, my 'where' default style overrides my class name style. I would like to inquire about the situation. So much so that I now have to use inline styles to override it

Additional information

No response

Example

No response

[weeptao]

I use NextJS 15.2.4

[icyJoseph]

I guess this is a problem with layers. Your :is selector for example, is part of the utilities layer, but the :where selector that's ultimately applying is unlayered, so it has higher priority, at a layer level. That's why it overrides.

Check it out here, https://stackblitz.com/edit/nextjs-cuywjrml?file=app%2Fglobals.css:

:where(p) {
  color: red;
}

/* :is(p) {
  color: blue;
} */

@layer utils {
  :is(p) {
    color: blue;
  }
}

Removing the comment from the :is(p) rule, makes things blue, but otherwise, the layering applies with utils, and that is less specific. Refer to the chart here, https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#description

In your case it is the utilities layer, as shown by the Chrome Dev Tools.