how to tailwind css cva autocomplete

🙄cva 함수 내부에서는 tailwind intellisense가 동작을 안해요

https://cva.style/docs/installation

Installation | cva

vs code를 기준으로 설명합니다.

cva의 docs에서는 settings.json에 위 정규식을 포함시키면 인텔리센스를 사용할 수 있다고 안내해줍니다.

다만 처음 하는 경우에는 살짝 어렵게 느껴질 수 있을 것 같습니다.

settings.json에 익숙하신 분들은 그냥 저 설명만 봐도 충분히 명확하지만말이에요!

 

settings.json에는 명령팔레트를 통해 진입할 수 있습니다.

명령 팔레트의 단축키는 ctrl + shift + p입니다.

기본 설정과 사용자 설정을 열 수 있는데

기본 설정은 readonly이니까 사용자 설정에서 수정해주면 되겠습니다.

사용자 설정 열기를 눌러주세요

 

혹은 ctrl + ,으로 진입해도 괜찮습니다.

ctrl + ,으로 진입한 경우 인풋창에 setting을 입력해두고 settings.json에서 편집을 찾습니다.

그런뒤 settings.json에 저 정규식을 넣어줍니다.

"tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]

json형식의 파일이니 각 객체를 나눌때 ,로 나누어주는것을 기억하시고

최상위 중괄호 내부에 넣어주면 됩니다.

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

공식문서에서는 이렇게 예제를 주는데 여기서 키를 감싸고있는 중괄호를 빼고 위에 올려둔 형태를

복사 붙여넣기해주시면 되겠습니다.

이제 cva 함수 내부에서도 바로바로 인텔리센스를 사용할 수 있어졌습니다!