Tailwind CSS 사용법 안내 (from gemini)

Tailwind CSS의 수천 가지 클래스명을 모두 외우는 것은 불가능에 가깝고, 숙련자들도 그렇게 하지 않습니다. 효율적으로 클래스명을 찾고 익히는 4가지 핵심 방법을 알려드릴게요.

---

1. 공식 문서 검색 (가장 정확한 방법)

가장 추천하는 방법은 **Tailwind CSS Documentation**을 활용하는 것입니다.

• Ctrl + K (맥은 Cmd + K): 공식 문서에서 단축키를 눌러 검색창을 띄우세요.
• 찾고 싶은 CSS 속성(예: font-size, flex, position)을 입력하면 대응하는 클래스명 리스트가 즉시 나옵니다.

2. VS Code 확장 프로그램 (필수 설치)

Tailwind CSS IntelliSense 확장을 설치하면 코딩 스타일이 완전히 달라집니다.

• 자동 완성: 클래스명을 입력하기 시작하면 사용 가능한 목록을 보여줍니다.
• 실시간 미리보기: 클래스명 위에 마우스를 올리면 실제 어떤 CSS 코드가 적용되는지 팝업으로 보여줍니다.
• 색상 확인: 색상 클래스 옆에 작은 사각형으로 실제 색상을 표시해 줍니다.

---

3. 클래스명 명명 규칙(Naming Convention) 이해

Tailwind의 클래스명은 일정한 패턴이 있어, 원리만 알면 유추하기 쉽습니다.

• 속성-값 구조: m-4 (margin: 4), p-2 (padding: 2)
• 방향 지정: mt-4 (margin-top), px-2 (padding left & right)
• 색상 단계: bg-blue-500처럼 색상명-밝기(50~900) 구조를 가집니다.
• 수치 단위: 보통 1 단위당 0.25rem (4px)입니다. 즉, w-4는 1rem (16px)이 됩니다.

---

4. 치트 시트(Cheat Sheet) 활용

공식 문서가 너무 방대하다면, 한 페이지에 모든 클래스를 모아둔 치트 시트 사이트를 북마크해 두세요. 한눈에 클래스를 훑어볼 때 매우 유용합니다.

• Tailwind Components Cheat Sheet
• Nerdcave Tailwind Cheat Sheet

팁: 브라우저 개발자 도구 활용

이미 만들어진 Tailwind 사이트가 있다면, **F12(개발자 도구)**를 눌러 요소를 찍어보세요. 어떤 클래스 조합이 어떤 디자인을 만드는지 직접 눈으로 확인하는 것이 가장 빠른 학습법입니다.

처음에는 flex나 grid 같은 레이아웃 관련 클래스부터 시작해서, 점차 색상과 간격 순으로 익혀보시는 건 어떨까요? 가장 먼저 구현해보고 싶은 UI 스타일이 있으신가요?