editor-setup

editor-setup (에디터 설정)

Tailwind CSS를 개발할 때 에디터에서 더 즐겁게 작업할 수 있도록 도와주는 공식 도구와 설정 방법을 소개하는 문서예요. 옆에서 함께 살펴보며 편하게 설명해 드릴게요.

출처: 문서

본문

Syntax support

Tailwind CSS는 @theme, @variant, @source 같은 커스텀 CSS 문법을 사용하는데, 일부 에디터에서는 이 규칙들이 인식되지 않아 경고나 오류가 표시될 수 있어요.

VS Code를 사용한다면, 공식 Tailwind CSS IntelliSense 플러그인이 Tailwind가 사용하는 모든 커스텀 at-rule과 함수를 지원하는 전용 Tailwind CSS 언어 모드를 제공해요.

경우에 따라 에디터가 CSS 파일에서 기대하는 문법에 대해 매우 엄격하다면, 네이티브 CSS 린팅/검증을 비활성화해야 할 수도 있어요.

Cursor

Cursor는 컨텍스트를 인식하는 자동 완성과 내장 코딩 에이전트 같은 기능을 갖춘 AI 네이티브 코드 에디터예요. VS Code 확장을 지원하므로, 우리가 이미 잘 알고 있는 모든 Tailwind CSS 도구가 그대로 동작해요. 여기에는 공식 Tailwind CSS IntelliSense 확장과 클래스 정렬을 위한 Prettier 플러그인도 포함돼요.

Cursor를 확인하고 다운로드해 보세요.

Zed

Zed는 처음부터 최첨단 개발 워크플로우를 위해 설계된 빠르고 현대적인 코드 에디터예요. AI를 활용한 에이전틱 편집도 지원해요. 별도의 확장을 설치·설정할 필요 없이 Tailwind CSS 자동 완성, 린팅, 호버 미리보기를 내장 지원해요. 또한 Prettier와 긴밀하게 통합되어 있어, 설치하면 공식 Prettier 플러그인이 Zed에서도 매끄럽게 동작해요.

Zed를 확인하고 Tailwind CSS와 어떻게 함께 동작하는지 더 알아보세요.

IntelliSense for VS Code

Visual Studio Code용 공식 Tailwind CSS IntelliSense 확장은 자동 완성, 문법 강조, 린팅 같은 고급 기능을 제공해서 Tailwind 개발 경험을 향상시켜 줘요.

Autocomplete — 유틸리티 클래스뿐 아니라 CSS 함수와 지시어(directives)에 대한 지능적인 제안을 제공해요.
Linting — CSS와 마크업 양쪽에서 오류와 잠재적 버그를 강조해 줘요.
Hover previews — 유틸리티 클래스에 마우스를 올리면 해당 클래스의 전체 CSS를 보여줘요.
Syntax highlighting — 커스텀 CSS 문법을 사용하는 Tailwind 기능이 올바르게 강조되도록 해 줘요.

GitHub에서 프로젝트를 확인해 더 알아보거나, Visual Studio Code에 추가해서 지금 바로 시작해 보세요.

Class sorting with Prettier

Tailwind CSS를 위한 공식 Prettier 플러그인을 관리하고 있는데, 이 플러그인은 권장 클래스 순서에 따라 클래스를 자동으로 정렬해 줘요.

커스텀 Tailwind 설정과도 매끄럽게 동작하며, 단지 Prettier 플러그인이기 때문에 Prettier가 동작하는 모든 곳에서 사용할 수 있어요. 모든 인기 에디터와 IDE는 물론 명령줄에서도 말이죠.

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

GitHub에서 플러그인을 확인하고 시작해 보세요.

JetBrains IDEs

WebStorm, PhpStorm 같은 JetBrains IDE들은 HTML에서 지능적인 Tailwind CSS 완성 기능을 지원해요.

JetBrains IDE에서의 Tailwind CSS 지원에 대해 더 알아보세요.