[Next.js] 반응형 css가 안먹힐 때

반응형 css를 구현하는 도중 스타일이 안먹히는 문제가 있었다.

@media (max-width: 500px) {
  .embla__dot {
    background-color: transparent;
    cursor: pointer;
    position: relative;
    padding: 0;
    outline: 0;
    border: 0;
    width: 20px;
    height: 20px;
    margin-right: 7.5px;
    margin-left: 7.5px;
    display: flex;
    align-items: center;
  }
}

max-width로 500이하 일때 w, h를 20px로 설정해놨는데,

아무리 화면을 줄여도 미디어 쿼리가 안먹고 w, h가 40px로 나왔고

(163:3) Nested CSS was detected, but CSS nesting has not 
been configured correctly. Please enable a CSS nesting 
plugin *before* Tailwind in your configuration. 
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

중첩 css를 쓰려면 플러그인을 활성화해라 라는 오류문구가 콘솔에 찍혔다

근데 나는 중첩 css를 쓴적이 없는데..

뭘까 대체.................................

하면서 서버를 껐다키니까 바로 적용이 되었다

..

아마 Next의 캐시문제 때문에 어디서 꼬인게 아니었을까.. 짐작⛏️