에디터 설정

​문법 지원

Tailwind CSS는 @tailwind, @apply, @config와 같은 커스텀 CSS at-rule을 많이 사용합니다. 많은 에디터에서 이러한 규칙을 인식하지 못해 경고나 오류가 발생할 수 있습니다.

이 문제를 해결하려면 일반 CSS 대신 PostCSS 언어 지원을 위한 플러그인을 에디터나 IDE에 설치하는 것이 가장 좋습니다.

VS Code를 사용 중이라면, 공식 Tailwind CSS IntelliSense 플러그인을 설치할 수 있습니다. 이 플러그인은 Tailwind CSS 전용 언어 모드를 제공하며, Tailwind가 사용하는 모든 커스텀 at-rule과 함수를 지원합니다.

경우에 따라 에디터가 CSS 파일의 문법을 엄격하게 검사한다면, 기본 CSS 린팅이나 검증 기능을 비활성화해야 할 수도 있습니다.

​IntelliSense for VS Code

공식 Tailwind CSS IntelliSense 확장 프로그램은 Visual Studio Code에서 Tailwind 개발 경험을 향상시켜 줍니다. 이 확장 프로그램은 자동 완성, 구문 강조, 린팅과 같은 고급 기능을 제공합니다.

• 자동 완성. 클래스 이름과 CSS 함수 및 지시어에 대한 지능적인 제안을 제공합니다.
• 린팅. CSS와 마크업에서 오류와 잠재적인 버그를 강조 표시합니다.
• 호버 미리보기. Tailwind 클래스 이름 위에 마우스를 올리면 해당 클래스의 전체 CSS를 확인할 수 있습니다.
• 구문 강조. Tailwind 기능이 올바르게 강조 표시되도록 구문 정의를 제공합니다.

더 자세한 내용은 GitHub에서 확인하거나, 지금 바로 Visual Studio Code에 추가하여 시작해 보세요.

​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">...</button>

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

더 자세한 내용을 알아보고 시작하려면 GitHub에서 플러그인을 확인해 보세요.

​JetBrains IDE

WebStorm, PhpStorm 등 JetBrains IDE는 HTML에서 그리고 @apply를 사용할 때 지능형 Tailwind CSS 자동 완성을 지원합니다.

JetBrains IDE의 Tailwind CSS 지원에 대해 더 알아보기 →