VSCode에서 Tailwindcss를 사용하려 보니…

이번에 개발하는 내 서비스의 기술스택을 완전히 바꾸게 되었다.
그 중 프론트엔드 쪽을 React로 잡았다.
그런데 이것저것 찾아보니 next.js를 쓰는게 좋을거 같아서 일단 변경해봤다.
근데 여긴 뭐 Typescript인지 뭔지 해서 이걸 써야 하는거 같다는 생각이 들었다. (안쓰면 나중에 고생할거 같은?)

일단 이것저것 셋팅을 해뒀는데 몇 가지 거슬리는 부분이 생겼다.

그 css에서 @tailwind 를 선언한 부분이 이렇게 경고가 났다.
그냥 무시해도 되는데…
나의 성격상 이게 또 거슬렸다.

그래서 찾아보니 두 가지 방법으로 해결 가능했다.

1번. 아주 심플한데 좀 찜찜한 방법 (미봉책)

말 그대로 간단하다.

1. VSCode에서 setting 으로 들어간다.
2. 검색창에서 css.lint.unknownAtRules 을 검색
3. 값을 ignore로 변경한다.

이렇게 처리하면 된다.
근데 미봉책이자 찜찜한 방법이다.

2번. 정석으로 처리(?)

설정을 추가하여 처리하는 방법인데 다음과 같다.

1. 다음의 경로에 파일을 하나 생성한다.

   • 자신의 vscode 환경설정 파일이 담기는 곳에 생성한다.
   • Mac의 기준으로 home/.vscode 이다.
   • 파일명은 원하는 걸로 만들어주는데 여기선 customcssconfig.json 이라 하겠다
   • 그래서 결국 만들어지는 경로 및 파일명은 /home/.vscode/customcssconfig.json 가 된다.

2. 1에서 만든 파일에 다음과 같은 json 내용을 채운다.

   {
    "atDirectives": [
      {
        "name": "@tailwind",
        "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
        "references": [
          {
            "name": "Tailwind’s “Functions & Directives” documentation",
            "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
          }
        ]
      }
    ]
   }

3. VSCode에서 setting를 열고 json이라 검색해서 settings.json 수정(JSON: Schemas 부분) 을 선택해서 수정 값에 아래의 내용을 추가해준다.

{
  //기타 기존 설정들
  ....
  "css.customData": [".vscode/custom_css_config.json"],
  ...
}

4. 이렇게 처리하고 VSCode를 재시작 해준다.

이렇게 하면 된다.
근데 이렇게 해도 안된다면 VSCode의 확장 프로그램을 누락해서 그렇다.
나는 PostCSS Language Support 이걸 안깔아서 안되었다.
검색이 안될경우 링크 를 참고하자.

여기까지 하면 보통은 다 될거로 믿는다.
만약 안된다면…

Next.js 환경설정을 하면서 뭔가 누락을 했거나 핵심 확장 프로그램을 설치하지 않은거다.
근데 보통 여기까지 하면 문제는 사라질듯 하다.