인프런 커뮤니티 질문&답변
작성한 질문수
Nextjs에서 tailwind를 사용할 때
해결된 질문
작성
·
83
0
Tailwind 꿀팁 알려주시면서 사전에 정의한 css들을 nextjs 프로젝트를 사용하면 tailwind를 지원하니 빌드할 때 스타일을 포함 안해도될 것 같다 라고 말씀하신 부분이 잘 이해가 안되어서 질문 드립니다...ㅜㅜ
어떻게 활용할 수 있다는 것인지 궁금합니다!
답변 2
0
안녕하세요~ 디자인 시스템을 tailwind로 만들어서 스타일 적용을 위해서 예를들면 className="pb-4 flex flex-row" 이런 className을 사용하게 됩니다.
만약 디자인 시스템을 활용하는 프로젝트에서 tailwind를 사용하지 않으면 해당 className이 아무런 의미가 없기때문에 스타일이 제대로 적용되지 않을거에요. 그래서 패키지를 publish할 때 CSS를 추출하게 됩니다.
그런데 next.js로 프로젝트를 하면 create-next-app으로 프로젝트를 생성할 때 tailwind를 디폴트로 상요하도록 유도하더라구요~ 그래서 그런 경우에는 디자인 시스템에 활용된 CSS를 추출하지 않고 사용할 수 있다는 뜻이었습니다!
0
안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 대한 답변이 정보 목록에 없어서 제가 해당 질문에 대해 직접 답변드릴 수 없음을 양해 부탁드립니다.
Next.js 프로젝트에서 Tailwind CSS를 사용하는 방법에 대한 궁금증이시라면, 공식 Tailwind CSS 문서나 Next.js 관련 문서를 참조하시는 것이 좋을 것 같습니다. Tailwind CSS를 Next.js에 통합하여 사용할 때는 몇 가지 설정을 해주어야 하며, 이를 통해 Tailwind의 유틸리티 클래스를 자유롭게 활용할 수 있게 됩니다. 빌드 과정에서 Tailwind CSS가 자동으로 필요한 스타일만 포함시켜주는 ‘Purge’ 기능 등을 통해 최적화를 진행할 수 있습니다.
더 자세한 내용이나 구체적인 설정 방법은 해당 기술의 공식 문서에서 확인하실 수 있습니다.
아~ 그렇군요 tailwind를 사용하는 프로젝트일 경우에 따로 CSS를 추출하는 과정이 필요 없다는 말씀이시군요~
혹시 Remix에서도 해당 강의로 디자인시스템 구축한게 잘 작동할까요?