[NextJS & Tailwind CSS] scroll smooth 적용하기(되는거야 뭐야?)

심리테스트 목록을 스크롤할 때 지금보다 부드럽게 스크롤 되었으면 하여 Tailwind CSS 홈페이지를 둘러보다가 'Scroll Behavior' 인덱스를 보게 되었다.

html 태그의 className으로 지정해주도록 되어있어서 그런가 div 같은 다른 태그들의 className에 추가해주면 적용이 되지 않았다.

하지만 어디에 html 태그가 있는지 찾을 수 없었다. 있긴한건가? 나와 같은 고민을 했던 글도 찾았다.

https://stackoverflow.com/questions/71125642/how-to-add-tailwind-css-scroll-smooth-class-to-next-js

How to add Tailwind CSS scroll-smooth class to Next.js

해결 방법은 다음과 같다. global.css 파일에 다음과 같은 코드를 추가해주는 것이다.

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

 

근데 사실... 스무스하게 스크롤이 되는진 모르겠다. 이전이랑 별 차이가 없는 것 같다 ㅠㅠ 그래도 혹시 나중에 찾을지도 모르니 기록으로만 남겨둬야겠다.

 

참고한 글)

https://stackoverflow.com/questions/71129698/how-to-use-smooth-scroll-from-tailwindcss-in-react

How to use smooth-scroll from tailwindcss in React?