Tailwind CSS VSCode Extension 소개

TOC

• 들어가며
• 사전 지식
• Tailwind CSS Docs
  • 개요
  • 기능
• Tailwind CSS IntelliSense
  • 기능
  • 설정
    • files.associations
    • editor.quickSuggestions
    • tailwindCSS.includeLanguages
    • tailwindCSS.classFunctions
• Tailwind Breakpoint Highlight
  • 개요
  • 기능
  • 설정
• Tailwind Fold
  • 개요
  • 기능
  • 설정
• 마치며

들어가며

이전 글인 Tailwind CSS 딥다이브에서 Tailwind CSS를 채택했고, 이제 본격적으로 Tailwind CSS의 단점들을 타파하기 위한 노력들을 해보려 합니다. 이번 글에서는 Tailwind CSS를 더 쉽게 쓰기 위한 VSCode Extension들을 알아보겠습니다.

사전 지식

이는 해당 프로젝트에 한정하여 extension들의 setting을 설정할 수 있고, 이 설정값은 같은 프로젝트를 다루는 모든 개발자들에게 공통적으로 적용됩니다. 설명의 편의를 위한 예시이므로 .vscode/settings.json 파일에 추가하는 것은 상황에 따라 구분해주시기 바랍니다.

Tailwind CSS Docs

개요

• download: austenc.tailwind-docs
• commit: Install: Tailwind Docs

기능

Tailwind CSS 공식문서 접근을 보다 더 쉽게 할 수 있습니다. 공식문서 영상은 브라우저 새 창이 표시되지만, 현재는 editor 내에서 바로 볼 수 있게 개선되었습니다.

Tailwind CSS IntelliSense

tailwindcss 공식문서의 Editor Setup에서는 tailwindcss를 사용할 때 DX를 높이기 위한 설정을 제안합니다. 이 중 Syntax Support 부분에서 VS Code 사용자에게 공식 Tailwind CSS IntelliSense를 제안하고 있어요.

기능

Tailwind CSS IntelliSense는 다음과 같은 기능들을 제공합니다.

• 자동완성(Autocomplete) : 유틸리티 클래스, CSS 함수와 directive의 자동완성을 지원합니다.
• 린팅(Linting) : CSS, 마크업에 존재하는 에러와 잠재적 버그를 하이라이팅합니다.
• 호버 미리보기(Hover Preview) : 마우스 오버 시 유틸리티 클래스의 CSS 속성 매핑을 보여줍니다.
• 구문 강조(Syntax Highlighting) : 커스텀 CSS 문법을 사용하는 tailwind 기능을 하이라이팅합니다.

설정

files.associations

.css 확장자의 파일을 항상 Tailwind CSS 모드로 열도록 설정합니다.

"files.associations": {
  "*.css": "tailwindcss"
}

editor.quickSuggestions

기본 VS Code는 일반 string에 대하여 tailiwnd 완성을 제공하지 않습니다. 이를 가능하도록 하는 설정입니다.

"editor.quickSuggestions": {
  "strings": "on"
}

tailwindCSS.includeLanguages

특정 언어를 추가 지원하기 위한 설정입니다. key-value에서 value는 built-in-language에 있는 언어를 추가할 수 있습니다.

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

tailwindCSS.classFunctions

class function들에서 자동완성, hover 미리보기, 린팅 등을 지원하기 위한 class function 등록 설정입니다.

{
  "tailwindCSS.classFunctions": ["tw", "clsx"]
}

let classes = tw`flex bg-red-500`
let classes2 = clsx([
  "flex bg-red-500",
  { "text-red-500": true }
])

문서에서는 twin.macro의 tw, clsx 등을 설정하라고 제안하고 있습니다. 각 라이브러리는 이후에서 더 다뤄보겠습니다.

Tailwind Breakpoint Highlight

개요

• download: jonnythemonke.tw-breakpoint
• commit: Install: Tailwind Breakpoint Highlight

기능

각 breakpoint prefix에 highlight를 부여해줍니다.

설정

breakpoint 이름별로 색상, 스타일, 굵기 등을 커스터마이징할 수 있습니다.

{
	"tailwind-breakpoint.breakpoints": [
		{
			"breakpoint": "sm",
			"decoration": {
				"color": "#ff0000",
				"fontStyle": "italic",
				"fontWeight": "normal"
			}
		},
	]
}

Tailwind Fold

개요

• download: stivo.tailwind-fold
• commit: Install: Tailwind Fold

기능

• 긴 class 접기
• 펼쳐진 class opacity 조절

설정

우선 커스터마이징할 수 있는 속성들입니다.

• tailwind-fold.autoFold: 자동 클래스 속성 접기/해제
• tailwind-fold.foldStyle: 접기 스타일 정의
• tailwind-fold.unfoldIfLineSelected: 줄이 선택되면 클래스 속성 풀기
• tailwind-fold.showTailwindImage: 접힌 내용 앞에 tailwind 로고 보여줄지 여부
• tailwind-fold.foldedText: 클래스 속성이 접힐 때 보여줄 텍스트
• tailwind-fold.foldedTextColor: 접힌 클래스 속성의 텍스트 색상
• tailwind-fold.foldedTextBackgroundColor: 접힌 클래스 속성의 텍스트 배경색
• tailwind-fold.unfoldedTextOpacity: 풀린 클래스 속성의 투명도
• tailwind-fold.supportedLanguages: 확장 프로그램이 활성화된 언어 배열
• tailwind-fold.foldLengthThreshold: 접기 위한 최소 문자 수

Settings(ctrl + ,)에서 GUI로 세팅도 가능합니다.

저는 이렇게 설정했습니다.

{
  "tailwind-fold.autoFold": true,
  "tailwind-fold.foldStyle": "ALL",
  "tailwind-fold.foldedText": "...",
  "tailwind-fold.showTailwindImage": false,
  "tailwind-fold.unfoldedTextOpacity": 0.7
}

그리고 그 결과입니다.

개인적으로는 스타일링을 위한 긴 classname이 안 보이니, 비즈니스 로직에 집중하기 좋았습니다. 다만 스타일 수정이나 퍼블리싱 단계에서는 클래스가 바로 보이지 않으니 불편이 예상되기도 합니다. tailwind-fold.autoFold를 false 처리하면 fold 설정 전체가 취소되니 작업 상황에 따라 세팅을 임시 변경하면 좋을 것 같네요.

마치며

VS Code 또는 VS Code 기반 AI Editor(Cursor, Windsurf 등)를 사용하는 경우, 위 설정들을 추가하면 더 쉽게 작업할 수 있을 것 같네요. 다음에는 확장 프로그램이 아니라, 라이브러리를 소개해드리겠습니다.