Firebase Authentication UI를 만들면서, CSS는 Tailwind CSS
를 활용했다.
이번 글에서는 Tailwind CSS가 뭔지, 그리고 왜 쓰면 편한지 직접 느낀 경험을 기록해둔다.

---

Tailwind CSS란?

• Tailwind CSS = “디자인용 레고 블록”
• 기존 방식: CSS 파일에 .button { color: red; } 이런 식으로 직접 스타일 정의
• Tailwind 방식: HTML 태그 안에 바로 class="bg-red-500 text-white p-4 rounded" 처럼 클래스 이름만 붙여서 스타일 완성

👉 즉, 미리 준비된 “스타일 조각”들을 가져다가 조립하는 느낌이다.

---

일반 CSS VS Tailwind CSS 예시 비교

<!-- 일반 CSS -->
<button class="btn">회원가입</button>

<style>
  .btn {
    background: blue;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
  }
</style>

<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
  회원가입
</button>

✅ 차이점: CSS 따로 안 쓰고, HTML 클래스만으로 바로 스타일링 가능!

---

Tailwind CSS 장점

1. 빠르다

• CSS 새 파일 열고, 클래스명 고민할 필요 없음

• 그냥 필요한 스타일을 class 안에 적으면 끝

2. 일관성 유지

• 팀에서 쓰면, 다들 같은 색상/여백 단위를 공유하게 됨

• text-gray-600, p-4, rounded-lg 같은 표준화된 규칙

3. 반응형도 손쉽게

<div class="w-full sm:w-1/2 lg:w-1/3">내용</div>

→ 화면 크기별로 자동 스타일 적용 (sm, md, lg 같은 prefix 사용)

---

반응형 프리픽스(sm:, md:, lg: …)가 뭔데?

Tailwind는 모바일 우선(Mobile-first) 이라서, 기본 클래스는 작은 화면에 적용되고,
sm:, md:, lg: 같은 프리픽스(prefix) 를 붙이면 그 너비 이상에서 덮어써서 적용된다.

기본 브레이크포인트(기본값)

접두사	의미(최소 너비)
sm:	≥ 640px
md:	≥ 768px
lg:	≥ 1024px
xl:	≥ 1280px
2xl:	≥ 1536px

✅ 해석: lg:w-1/3 → 화면이 1024px 이상일 때 너비를 1/3로.

---

예제 해부

<div class="w-full sm:w-1/2 lg:w-1/3">내용</div>

• 기본(모바일, < 640px): w-full → 가로 100%
• 태블릿(≥ 640px): sm:w-1/2 → 가로 1/2 (2열 레이아웃처럼 보임)
• 데스크탑(≥ 1024px): lg:w-1/3 → 가로 1/3 (3열 레이아웃)

즉, 화면이 커질수록 더 구체적인 규칙이 다음 규칙을 덮어쓴다고 보면 된다.

---

자주쓰는 클래스 정리

레이아웃/디스플레이

분류	클래스	의미
컨테이너 폭	container, max-w-sm/md/lg/xl/2xl, w-full, w-1/2, w-1/3, w-96	최대/고정/분수 너비
디스플레이	block, inline-block, inline, flex, grid, hidden	표시 방식
방향/정렬	flex-row, flex-col, items-center, justify-between, gap-4	플렉스 정렬/간격
그리드	grid-cols-1/2/3, sm:grid-cols-2, gap-4	그리드 열/간격

간격(Spacing)

분류	클래스	의미
마진	m-4, mx-4, my-2, mt-6	바깥 여백
패딩	p-4, px-4, py-2, pt-6	안쪽 여백
요소간 간격	space-x-4, space-y-2	형제 사이 간격(수직/수평)

타이포그래피

분류	클래스	의미
크기	text-xs/sm/base/lg/xl/2xl/…	글자 크기
두께	font-light/normal/medium/semibold/bold	폰트 두께
색상	text-gray-600, text-blue-600, text-red-500	글자 색
정렬	text-left/center/right	정렬

배경/테두리/모서리/그림자

분류	클래스	의미
배경색	bg-white, bg-gray-100, bg-blue-600	배경 색
테두리	border, border-0/2, border-gray-300	보더 두께/색
모서리	rounded, rounded-md/lg/full	둥근 정도
그림자	shadow, shadow-md/lg	그림자 강도

상태(hover/focus/disabled 등)

분류	클래스	예시
호버	hover:bg-blue-700, hover:underline	마우스 오버
포커스	focus:outline-none, focus:ring-2, focus:ring-blue-500, focus:ring-offset-2	포커스 스타일
비활성	disabled:opacity-50, disabled:cursor-not-allowed	비활성 상태

위치/기타

분류	클래스	의미
위치	relative, absolute, fixed, inset-0, top-0, left-1/2	포지셔닝
오버플로우	overflow-hidden/auto	넘침 처리
커서	cursor-pointer/not-allowed	커서
전환	transition, duration-200, ease-in-out	트랜지션

---

실제 사용 시 느낀 점(Firebase 인증 페이지에 적용해보니…)

• 로그인 박스를 만들 때, bg-white shadow-lg rounded-lg p-6만 붙여도 바로 예쁜 카드 완성
• 버튼도 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg만 쓰면 즉시 현대적인 느낌

👉 디자인 감각 없어도 깔끔한 UI를 만들 수 있었다.

---

📝 이번에 배운 점

• Tailwind CSS는 “디자인 초보도 안전하게 쓸 수 있는 스타일 사전” 같은 존재다.

• Utility-first 개념 이해: Tailwind는 “작은 유틸리티 클래스 조합”으로 스타일링한다는 철학.

• 모듈성: 같은 컴포넌트를 다른 페이지에서 재사용할 때도, 별도 CSS 수정 없이 그대로 가져다 쓸 수 있다는 점.

• CSS를 따로 작성하지 않아도 되니, 개발 속도가 확실히 빨라진다.

• 반응형 레이아웃까지 클래스 하나로 해결 가능하다.

• Firebase 같은 MVP 개발에서는 Tailwind가 특히 빛을 발한다 ✨