nextjs 프로젝트 내 Tailwind CSS 관련 질문드립니다.

Question

안녕하세요. 작년 이맘때 즈음 okky 통해서 많은 지식을 얻었는데,또 궁금한 점이 생겨 질문드립니다:)next js app 디렉터리 기준 프로젝트를 진행하고 있는데요.내부 css는 tailwind CSS를 채택하였습니다.그런데 개발하면서 개발자모드에서 받아온 페이지를 확인하면 pre-rendering 되어진 html 문서에 css가 적용되어 있지를 않습니다,,tailwind CSS는 서버사이드에서 렌더링되는 기능이 없는지 여쭤봅니다!

안녕하세요플레 · Answer

tailwind css는 utility-first css 프레임워크로 서버사이드 렌더링을 지원합니다

Hee Sung Son · Answer

tailwind CSS 가 정상 설치되지 않은거 같습니다. 공식 문서를 보시고 다시 설치 해보시는걸 추천드립니다. 혹은 boiler-plate 로 시작하시어 적용해보세요.

컴포지트 · Answer

제가 App directory 와 tailwind 환경에서 실제 서비스 하는 사이트가 있습니다. 작동 되어야 정상입니다. 저는 멀쩡하게 잘 작동하고 있습니다. 만약 서버 컴포넌트 렌더링이 안된다면, 아래를 확인해 보시길.app/layout.(jsx|tsx) 파일에 tailwind 사용한 CSS 파일을 import 하였는가? (중요) className 에 css 클래스명이 잘리거나 일부 잘라 동적으로 관리하고 있지 않은가? (예를 들어 "bg-yellow-500" 이렇게 완벽한 문자열로 줘야지 "bg-yellow-" + 500 이런 식으로 주면 안 됩니다.)클래스 합치는 유틸(classNames 등) 라이브러리 선택이 올바르게 사용되고 있는가? 타입스크립트의 경우, 파일 확장자를 잘 가리키고 있는가? (왠만하면 첫 프로젝트 만들때 고려해서 세팅해 줍니다.)공식 문서도 확인하여 종속성 또한 올바르게 설치되어 있는지 확인해 보시길.https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

josiah_0208 · Answer

세세한 댓글 정말 감사합니다. 오전에는 근무 중이라 추천밖에 못드렸는데, 추가로 질문드릴 것이 있습니다.말씀하신 부분과 첨부해주신 공식문서 영역을 따라해도 여전히 현상은 같습니다..다만, 제가 확인해본 결과 넥스트 공식문서 페이지와 공식문서에 소개하하는 next로 만든 다른 유명한 도메인들도 프리뷰가 제가 말씀드린 것과 같이 CSS가 적용되지 않은 상태로 도착합니다.그런데 의아한건 또 몇몇 도메인은 아래와 같이 CSS도 같이 그려져서 오네요. 제가 원하는건 서버 사이드에서 CSS가 먹어서 오는건데,..생각해보니 css 파일이 아예 안먹는게 아니라 브라우저로 전송된 것보니까 의도된 건가 싶기도 하구요.댓글 작성자님의 넥스트로 만드신 프로젝트는 CSS가 먹힌 html 문서가 오는건가요??,,,

josiah_0208 · Answer

저와 비슷한 고민을 가지고 계신다면, 일단 tailwindCSS는 빌드시에 번들을 생성합니다. 이 css 번들은 생성된 사용자의 브라우저에 보내는데요. 따라서 사용자의 브라우저에서 적용 되는 것 같습니다.의외로 css-in-js 라이브러리들의 몇가지 설정으로 서버에서 css가 적용되게 할 수 있습니다.

nextjs 프로젝트 내 Tailwind CSS 관련 질문드립니다.

5개의 답변

Q&A 목록