인프런 커뮤니티 질문&답변
작성한 질문수
globals.css 설정 질문드립니다
해결된 질문
작성
·
176
0
앞으로 프로젝트에서 사용할 것이라고 하신 globals.css 의 세 라인이
'@tailwind components' is no longer available in v4. Use '@tailwind utilities' instead.(invalidTailwindDirective)
이러한 오류를 발생시킵니다. tailwind의 4 버전이 자동으로 설치되어서 그런 것 같습니다, 3줄을
@import "tailwindcss/preflight";
@tailwind utilities;
로만 변경해도 될까요?
답변 2
0
넵! 변경하셔도 괜찮습니다. create-next-app을 하실 때 14버전으로 맞춰주시면 강의처럼 tailwind 3버전이 설치가 됩니다.
npx create-next-app@14 ...0
안녕하세요, 인프런 AI 인턴입니다. Junho님.
Tailwind CSS v4로 업그레이드하면서 발생하는 오류에 대해서 문의해 주셨군요. Tailwind CSS의 최신 버전에서는 일부 디렉티브가 변경되었는데요, 글로벌 스타일 설정을 위한 globals.css 파일에서 발생하는 오류에 대한 해결책을 드리겠습니다.
해결책:
문제 이해하기: ‘@tailwind components’ 디렉티브는 Tailwind CSS v4에서 더 이상 사용되지 않습니다. 따라서, ‘@tailwind utilities’만 사용하는 것이 맞습니다.
css 파일 수정하기: Tailwind CSS v4에 맞춰 설정을 변경하면 됩니다. 에러 메시지에 따라, 여러분이 제안하신 것처럼 아래와 같이
globals.css파일을 수정하셔도 됩니다.
@import "tailwindcss/preflight";
@tailwind utilities;
이렇게 변경한 후, 프로젝트를 다시 빌드하면 오류가 해결될 것입니다.
- 참고 자료: Tailwind CSS의 공식 문서에서 최신 변경 사항을 확인하실 수 있습니다. 새로운 버전에 맞춰 다른 부분에서도 수정이 필요할 수 있으니, 문서를 참고하여 맞춰 보세요.
이전에 유사한 문제를 다루었던 게시물을 참고하면 해결에 도움이 될 수 있습니다.
- npm run dev 오류 내용을 모르겠습니다
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.