본문 바로가기
카테고리 없음

[Tailwind CSS IntelliSense] GitHub에 이슈를 남기고 얻은 배움

by LucetTin5 2025. 5. 9.

프로젝트 진행 중 발생한 문제 상황

사내 디자인 시스템을 Tailwind CSS v4 기반으로 재구축하는 작업을 진행하게 되었다.

v4에서는 CSS 기반의 configuration을 제공하는데, 이를 컴파일하여 styles.css로 제공하는 구조를 채택했고, consuming 프로젝트를 가정하여 사용 테스트를 하던 중 Tailwind CSS IntelliSense가 동작하지 않는 문제가 발생했다.

 

원인을 분석해보다

@import "tailwindcss";
@import "fake-package/styles.css";


consuming 프로젝트 쪽에서 컴파일된 css를 불러오는 구조는 위와 같이 작성하였다.

{
  "tailwindCSS.experimental.configFile": "apps/next-app/app/globals.css"
}

여기에 추가적으로, .vscode/settings.json을 위와 같이 작성하여 인텔리센스가 CSS configuration 파일을 정확히 인식할 수 있도록 설정했다. 하지만 컴파일된, 원래 디자인 시스템이 가지고 있을 유틸리티 클래스들을 인식하지 못하는 것은 동일했다.

 

GitHub 이슈를 남기다

학습을 하면서, 작업을 하면서 수많은 깃허브 이슈를 보고 참고했지만, 직접 작성하는 것은 처음이었다.

새로운 이슈를 생성하려 하니 작업 환경(OS, VSCode 버전, 인텔리센스 버전, Tailwind CSS 버전, VSCode 설정, Tailwind CSS 설정 등)의 정보와 이슈 설명, 재현 방법 등을 적을 수 있도록 템플릿이 제공되었다.

 

처음에는 간단하게 작업 환경과 내가 겪은 이슈 상황을 글로만 적었다.

하지만, 이것만으로 상대가 내 상황을 이해하고 빠르게 답변을 줄 수 있을까에 대해 고민을 해보게 되었다.

그리고 우선 실제 문제 상황의 스크린샷을 함께 첨부했다.

왼쪽은 디자인 시스템을 작업하던 환경이고, 오른쪽은 빌드한 디자인 시스템을 import하는 환경이다.

디자인 시스템의 설정이 적용된다면 오른쪽에서 text-primary-main과 같은 유틸리티 클래스가 인텔리센스에 의해 추천되어야 했다.

 

이렇게 작성을 하고 나서도 확신이 들지 않았고, 템플릿에 있던 reproduction url에 생각이 닿았다.

 

위 과정을 아주 작은 패키지 구성을 통해 재현할 수 있는 방법이 없을까 생각해보다가, package.json에 다음과 같이 로컬 패키지를 설치할 수 있는 방법을 이용해보기로 했다.

{
  "name": "my-app",
  "dependencies": {
    "fake-package": "file:../../fake-package"
  },
  "devDependencies": {
  }
}

 

pnpm 기반으로 모노레포를 구성하고, consuming package에서는 위와 같이 로컬 패키지를 이용하게 하여 간단하게 재현 프로젝트를 구성할 수 있었다.

 

그리고 답변을 받았다

https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1351#issuecomment-2866555245

상당히 빠르게 답변을 받을 수 있었고 중요한 사실을 깨닫게 되었다.

Tailwind CSS 설정 엔트리 파일을 기반으로 이를 컴파일하게 되면 @theme, @utility 등의 테일윈드 설정을 위한 지시자로 이루어진 설정 파일들의 집합이 아닌, CSS variables와, 실제 프로덕션에 이용될 컴파일된 class명만이 존재하는 css 파일이 된다는 점이다.

이는 더이상 configuration 파일이 아니게 되는 것이다. 따라서, 이를 직접적으로 확장하거나 덮어쓰는 것이 어려울 뿐 아니라 인텔리센스도 더 이상 테일윈드 설정이 아닌 css파일을 기준으로 자동완성 등을 제공할 수 없다는 것이었다.

 

정리하며

문제를 만나 분석하고, 이를 해결해 나가는 과정에서 몇가지 알게된 점이 있다.

  • 문제 상황을 전달함에 있어 재현 가능한 환경을 기반으로 설명을 덧붙이는 게 상호 이해에 도움이 된다
  • 이슈를 작성하는 과정 자체가 곧 문제의 원인, 해결 방안 분석의 기반이 된다
  • 재현 환경을 제공하면 해결 방안을 찾아내는 쪽에서도 그 속도가 빨라질 수 있다

그리고 테일윈드 설정을 컴파일해버리면 설정 정보가 더 이상 남지 않기 때문에 아예 원본 설정 전체를 제공하여 확장/덮어쓰기를 가능하게 하는게 좋을 것이라는 결론에 도달하게 되었다.

 

실제로 이렇게 원본을 제공하고 소비 프로젝트에서 원본의 엔트리 css를 import하게 되면 인텔리센스가 정상적으로 자동완성과 suggestion을 띄우는 것을 확인할 수 있었다. 이 원본을 그대로 모듈로 제공하기 위해서 vite-plugin-static-copy를 추가하여 설정했다. 그를 통해 styles.css와 해당 엔트리 파일에서 이용하는 styles 디렉토리를 원본 그대로 제공하는 방식을 적용했다.

 

저작자표시 비영리 동일조건 (새창열림)

티스토리툴바