Webstorm에서 tailwindCSS와 clsx를 사용할 때 자동완성이 되지 않는 문제 해결방법

vscode에서는 기본적으로 지원하는 clsx 내부에 tailwindcss 자동완성이 웹스톰에서는 지원되지 않는다..

돈내고 쓰는것보다 커뮤니티크기가 큰게 더 좋을걸까…

뭐 아무튼 여러가지 해결방법을 찾아 헤맨 끝에 완벽한 방법은 아니더라도 해결할 수 있는 방법을 찾아냈다.

1. 웹스톰 → Settings → Language & Frameworks → Style Sheets → Tailwind CSS 설정으로 접근한다.
2. 설정 항목 중 experimental 부분을 아래와 같이 수정한다.

  "experimental": {
    "configFile": null,
    "classRegex": ["[\"'`]([^\"'`]*).*?[\"'`]"]
  }

문제는 이렇게 하면  "" '' 와 같이 일반적인 Quotes를 사용할 때도 tailwind 자동완성이 뜬다는 것이다..

 

더 나은 방법을 찾게 될 때 까지는 당분간 이렇게 쓰도록 해야겠다.

 

 

참고 : https://youtrack.jetbrains.com/issue/WEB-48505/Tailwind-CSS-regex-support-custom-class-name-completion-contexts

Tailwind CSS regex support (custom class name completion contexts) : WEB-48505