Tailwind CSS

2025.1.27 월요일의 공부기록

Tailwind CSS는 클래스 기반의 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, HTML 클래스에 스타일을 정의하여 효율적인 개발과 유지보수를 가능하게 한다.
여기에 Mac 사용자에게 유용한 단축키와 VS Code 관련 팁을 함께 정리했다.

---

Tailwind CSS란?

Tailwind CSS는 디자인 시스템을 구축하고 클래스 기반으로 스타일을 작성할 수 있도록 설계된 프레임워크다.
전통적인 CSS 방식과 달리, 미리 정의된 유틸리티 클래스를 사용하여 빠르게 UI를 개발할 수 있다.

주요 특징

1. 유틸리티 클래스 기반

   • CSS 클래스를 미리 정의하여 재사용 가능하고 직관적인 방식으로 스타일을 작성한다.

   <div class="bg-blue-500 text-white p-4 rounded-md">
     Hello, Tailwind!
   </div>
   

2. 사용자 정의 가능
   • 프로젝트에 맞게 Tailwind 설정 파일(tailwind.config.js)을 커스터마이징하여 유연하게 사용할 수 있다.

3. Responsive Design 지원
   • 기본적으로 반응형 디자인을 지원하며, sm, md, lg 등의 브레이크포인트를 제공한다.

   <div class="text-sm md:text-lg lg:text-xl">
    Responsive Text
   </div>

4. JIT(Just-In-Time) 컴파일
   • 필요한 CSS 클래스만 컴파일하여 빌드 크기를 최소화한다.

5. Mac에서 Tailwind CSS 사용 시 유용한 단축키
   1. 자동 완성 활성화
   Tailwind CSS 클래스 자동 완성 기능을 빠르게 열려면:
   • Option + Esc
   2. VS Code에서 설정 개선
   자동 완성을 문자열에서도 항상 활성화하려면, settings.json에 다음 설정을 추가:

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

---

Tailwind CSS와 함께 사용하면 좋은 VS Code Extensions

1) Tailwind CSS IntelliSense

•	클래스 이름 자동 완성, 구문 강조, Linting 제공.
•	Tailwind CSS를 사용할 때 가장 필수적인 확장 프로그램.
•	설치 링크: Tailwind CSS IntelliSense

2) Headwind

•	Tailwind CSS 클래스의 순서를 정리하여 코드 일관성을 유지.
•	클래스가 지정된 순서대로 재정렬되므로 가독성과 유지보수성이 향상된다.
•	설치 링크: Headwind

3) Tailwind CSS Explorer

•	Tailwind 설정에서 사용할 수 있는 클래스를 탐색할 수 있다.
•	프로젝트 내에서 사용할 수 있는 Tailwind 유틸리티를 빠르게 확인 가능.
•	설치 링크: Tailwind CSS Explorer

Tailwind CSS 팁 및 활용법

1) 사용자 정의 Tailwind 설정
• tailwind.config.js 파일에서 테마나 색상, 브레이크포인트 등을 커스터마이징할 수 있다.

module.exports = {
 theme: {
   extend: {
     colors: {
       primary: '#1E3A8A', // 사용자 정의 색상
     },
   },
 },
};

2) CSS 클래스 조합 자동 정렬
• Headwind를 사용하면 클래스 순서를 자동으로 정렬하여 일관성을 유지할 수 있다.

<!-- Before Headwind -->
<div class="text-white bg-blue-500 rounded-md p-4">
</div>

<!-- After Headwind -->
<div class="bg-blue-500 text-white p-4 rounded-md">
</div>

3) Tailwind IntelliSense를 최대한 활용
• 클래스 자동 완성과 미리보기 기능으로 작성 속도와 정확성을 높일 수 있다.
• hover, focus, sm, md 등의 변형 클래스도 지원한다.