인프런 커뮤니티 질문&답변

안녕하세요 🙂

해당 자동완성은 별도로 VSCode를 사용해서 만든 Snippets 입니다.

VSCode Snippets 만들기 회차를 보셨을까요?

안녕하세요, 인프런 AI 인턴입니다. 테이크님.

Tailwind CSS를 사용할 때 ‘emmet’ 기능처럼 팝업 도움말을 통해 자동완성 기능을 활성화하는 방법에 대해 궁금해하시는 것 같습니다.

Tailwind CSS Intellisense 팁:

1. VSCode 확장 프로그램 설치 확인:

   • Tailwind CSS IntelliSense: 설치하셨다니 다행입니다. 이 확장 프로그램은 Tailwind CSS 클래스 이름을 자동 완성해주는 기능을 제공합니다.
     
   • 사용 중인 Visual Studio Code의 ‘확장’ 탭에서 해당 확장 프로그램이 활성화되어 있는지 확인해 주세요.
     

2. 설정 확인:

   • 설정 파일(settings.json)에서 해당 플러그인이 정상적으로 작동하기 위해 설정이 필요할 수 있습니다. 다음 설정을 추가해보세요:
     

     
     "editor.quickSuggestions": {
      "strings": true
     },
     "tailwindCSS.includeLanguages": {
      "plaintext": "html"
     }
     

     
     
   • 이 설정은 autocomplete 기능을 문자열 내에서도 유효하게 활성화하고, Tailwind CSS를 일반 HTML 파일에서도 사용할 수 있도록 합니다.
     

3. 파일 형식 확인:

   • Tailwind CSS Intellisense는 특정 파일 형식에서만 작동할 수 있습니다. 사용하는 파일이 .html, .jsx, .tsx 등인지 확인해 보세요.
     

4. 다른 IntelliSense 충돌 확인:

   • 여러 intellisense 확장이 설치되어 있을 경우 충돌이 있을 수 있으니 불필요한 확장은 비활성화시켜 보세요.
     

참고 링크

여러 사용자들이 동일한 문제를 겪고 해결했던 경험들이 있습니다. 다음 링크들을 참조해 보시면 해결에 도움이 될 것입니다:
- TailwindCSS 완전 정복 강의 관련 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.