Tailwind CSS VSCODE Extension, 환상적인 확장 프로그램 소개

Introduction

이번 글에서는 Vscode에서 Tailwind css를 사용할 때 유용한 두가지 확장프로그램을 소개하고자 합니다.

그 확장프로그램은 Tailwind Twin IntelliSense와 HeadWind입니다.

---

1. Tailwind Twin IntelliSense

vscode에서 Intellisense 확장프로그램을 설치했다면, Tailwind CSS 마스터입니다.
CSS 프레임워크를 다룰때 지속적으로 나왔던 단점이 '학습곡선이 존재한다. ' (본인은 동의하지 않음)었습니다.

하지만 이 환상적인 확장 프로그램을 설치함으로써, 없애버렸습니다.

일단 사용하기만 한다면, Tailwind CSS의 클래스를 빠르게 탐색하고 적용하는데 매우 유용합니다.

 

역할

• 자동 완성 기능 : 클래스 이름을 입력하는 동안 IntelliSense가 존재하는 CSS 클래스를 보여주어 빠르고 쉬운 작업을 가능하게 합니다.
• 클래스 이름 제안 : Tailwind CSS의 클래스에 대한 힌트와 제안을 제공하여 사용자가 해당 프레임워크를 쉽고 편리하게 활용할 수 있도록 도와줍니다.
• CSS 클래스 문법 지원 : Tailwind CSS의 클래스를 올바른 구문으로 입력할 수 있도록 도와 오타나 잘못된 사용을 방지합니다.

---

2. HeadWind

Headwind extension은 확실히 좋습니다. 

기능은 단순합니다. Tailwind CSS 클래스를 자동 정렬하고 구성하여 코드를 구조화하고 유지보수하기 쉽도록 도와줍니다.

 

역할

• 클래스 자동 정렬 : Tailwind CSS 클래스를 알파벳순으로 자동으로 정렬하여 코드를 보다구조화되고 일관된 스타일로 유지할 수 있도록 지원합니다. 
• 그룹화 및 정렬 : 클래스를 그룹화하여 비슷한 클래스를 같이 묶어 더 쉽게 파악하고 관리할 수 있도록 합니다

 

기타 미적용에 대한 이슈 해결방법 

(package.json에 아래의 내용을 추가합니다.)

"headwind.classRegex": {
  "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
  "postcss": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);"
}

 

적용전

<header className="border-primary sticky lg:bg-transparent top-0 w-full py-4 bg-bgprimary/90 z-30 border-b lg:border-none lg:relative">
...

 

적용후

<header className="sticky top-0 z-30 w-full py-4 border-b border-primary lg:bg-transparent bg-bgprimary/90 lg:border-none lg:relative">
...

 

이상으로, 설치 및 세팅은 간단하지만 환상적인 확장 프로그램 두가지를 소개해보았습니다.

---