TailwindCSS가 Next.js Pre-Rendering 에서 동작하지 않아요

Question

Next.js 13.4 에 App directory 를 사용 중입니다.
Pre Rendering 된 결과물에서 보면 TailwindCSS 가 적용되어있지 않네요.
원래 동작이 이런건지? 아니면 별도의 설정 방법이 있는건지 궁금합니다.

https://shubhamverma.me/blog/server-side-rendering-of-tailwind-css-styles-in-next-js
이 방식을 사용해봤는데 되지 않네요 ㅜ

손정현 · Answer

안녕하세요!

혹시 dev 모드가 아니라 빌드해서 확인했을때도 스타일이 안먹히나요?
찾아보니 유사한 이슈가 깃허브에 있네요! 이슈 자체는 인라인으로 스타일을 먹여서 해결한것 같긴합니다.
- https://github.com/vercel/next.js/discussions/12868

raw-loader라는 툴을 써서 인라인으로 만드는 방법도 있네요! 참고해보세요 :)
- https://velog.io/@pptrolldev/Next.js-Tailwind-CSS-SSR-%EC%A0%81%EC%9A%A9

위동현 · Answer

개인적으로 해결이 쉬운방법은 해당 컴포넌트에 직접 globals.css를 가져오는 일입니다.

해당 slug나 컴포넌트에 아래 코드를 넣어보세요.