tailwind css 적용 잘 안되면 참고하세요.

Question

강의 들으면서 따라가다 보니 영상에는 vue가 들어가 있는데요. content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], 이부분에 vue가 들어가야 tailwind css가 적용되는것 같습니다. 참고하세요.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Minkoo Lee님. Tailwind CSS 설정을 적용하는 과정에서 생길 수 있는 문제를 해결하기 위해 참고할만한 내용을 제공해 드리겠습니다. 질문에서 언급하신 대로, Tailwind CSS가 제대로 적용되지 않는 경우는 보통 tailwind.config.js 파일의 content 경로에 Vue 파일을 설정하지 않았기 때문일 수 있습니다. Tailwind CSS는 해당 경로에 지정된 파일들에서 사용 중인 클래스 이름을 기반으로 스타일을 생성하므로, vue 파일도 포함시키는 것이 중요합니다. TailwindCSS와 Vue 설정 팁 Tailwind CSS가 Vue 프로젝트에 제대로 적용되지 않는 경우, tailwind.config.js 의 content 설정에 './src/**/*.{vue,js,ts,jsx,tsx}' 와 같이 Vue 파일을 명시해야 합니다. 이는 Tailwind가 클래스 이름을 제대로 파악하여 스타일을 적용할 수 있게 합니다. 관련 질문/답변 링크 Tailwind CSS 설정에서 vue 파일 누락 해결하기 : 설정에 관한 자세한 설명을 통해 문제 해결에 도움을 받을 수 있습니다. Vue 3와 Tailwind CSS 효율적으로 사용하기 : Vue 프로젝트에서 Tailwind CSS를 효과적으로 설정하고 사용하는 법에 대해 다룹니다. 위 정보를 참고하시면 Tailwind CSS가 제대로 적용되지 않을 때 문제를 해결하는 데 도움이 될 것입니다. 프로젝트 설정 시 경로 설정이 누락되지 않도록 꼼꼼히 확인해 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.