🎨 Tailwind 1장: 유틸리티 클래스 멘탈 모델

📋 목차

• 📌 이 문서를 읽기 전에
• 🤔 왜 알아야 하는가
• 🏗️ 비유로 먼저 이해하기
• 🧩 Utility-First 철학이란 무엇인가
• ⚖️ 전통적인 CSS vs Tailwind CSS
• 💻 Before / After: 영수네 커뮤니티 카드 컴포넌트
• 🚨 영철이가 흔히 저지르는 실수들
• 🏁 이번에 배운 내용 총정리
• 📝 마무리 퀴즈
• 🐣 영철이의 퇴근 일기
• 🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분 (전체) / 핵심 파트만: 8분

🗺️ 이 문서의 흐름
전통 CSS 의 고통 → utility-first 의 탄생 배경 → Tailwind 클래스 해부 → Before/After 실전 비교

🎯 이 문서를 다 읽으면 할 수 있는 것

• "Tailwind는 인라인 스타일이랑 뭐가 달라요?"라는 질문에 시니어처럼 답변할 수 있다
• className="flex items-center gap-4 rounded-xl bg-white p-6 shadow-lg" 같은 클래스 나열이 왜 올바른 설계인지 설명할 수 있다
• BEM, CSS Modules, Tailwind 중 상황에 따라 무엇을 써야 할지 판단할 수 있다

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 (신입): "리드 님! 저 Tailwind 써봤는데요, 클래스가 HTML 에 너무 많이 박히는 것 같아서... 제 이전 팀장 님은 이게 유지보수 지옥이라고 하셨거든요?"
• 🦁 영호 (리드): "영철 님, 그 팀장 분이 2018년 Tailwind 를 보신 거 아닐까요? 지금은 달라요. class="flex items-center p-6" 이 10개 BEM 클래스를 5개 CSS 파일에 나눠 쓰는 것보다 훨씬 추적이 쉽거든요."
• 👔 영수 (PM): "저는 어떤 방식이든 빠르게 나오면 됩니다만... 최근에 디자인 수정 요청이 들어올 때마다 CSS 파일 찾느라 다들 힘들어하는 것 같더라고요."
• 🎨 영숙 (디자이너): "저도 공유받은 HTML 에서 어떤 스타일이 어디서 오는지 파악이 너무 어려웠어요. 클래스 이름이 card__title--active 같은 건데 CSS 파일을 10개나 뒤져야 하더라고요."

🤔 왜 알아야 하는가

영철이는 지금껏 CSS 를 이렇게 써왔어:

/* styles/card.css */
.card { border-radius: 12px; background: white; padding: 24px; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.card__title { font-size: 20px; font-weight: 700; color: #111; }
.card__badge { background: #dbeafe; color: #1d4ed8; border-radius: 9999px; padding: 2px 10px; }

이걸 5개 컴포넌트에 걸쳐 비슷한 CSS 를 각자 만들다 보니 어느 순간 card, post-card, user-card, study-card 같은 비슷하지만 미묘하게 다른 클래스들이 수십 개 생겨버렸어.

영숙이 "카드 둥글기 좀 줄여주세요" 라고 하면? border-radius 를 어디서 어디까지 바꿔야 할지 파악하는 데만 30분이 걸려. 영수는 벌써 "왜 이렇게 오래 걸려요?" 라고 재촉하고 있고.

이 혼돈을 끝내러 나타난 것이 바로 Tailwind CSS 의 utility-first 접근법이야.

🏗️ 비유로 먼저 이해하기

🤔 잠깐, 먼저 생각해봐
레고 블록으로 집을 짓는 방법에는 두 가지가 있어. 어떤 방법이 더 유연하고 재사용성이 높을까?

🧱 두 가지 레고 전략

[전략 A: 미리 만들어진 성 세트]
레고 제조사가 "성 패키지", "우주선 패키지" 를 만들어서 판매. 아름답지만 다른 형태를 만들려면 패키지를 뜯어고쳐야 해.

→ 전통 CSS 의 컴포넌트별 클래스 (.card, .btn-primary, .modal-header) 방식이야. 잘 만들어져 있지만, 맞지 않으면 수술이 필요해.

[전략 B: 원자 블록들]
1x1 블록, 2x1 블록, 둥근 블록... 기본 단위 블록만 잔뜩. 처음엔 어색하지만 무엇이든 자유롭게 조합할 수 있어.

→ Tailwind CSS 의 유틸리티 클래스 (flex, p-6, rounded-xl, shadow-lg) 방식이야.

💡 한 줄로 기억하기
전통 CSS 는 완성된 성 세트, Tailwind 는 원자 블록들의 창고다. 창고가 처음엔 복잡해 보이지만, 결국 더 많은 것을 더 빠르게 만들 수 있어.

🧩 Utility-First 철학이란 무엇인가

Tailwind CSS 의 핵심 철학은 딱 하나야:

"CSS 속성 하나 = 클래스 하나"

flex 는 display: flex; 만 담당해. p-6 은 padding: 1.5rem; 만 담당해. text-lg 는 font-size: 1.125rem; 만 담당해.

이런 단일 책임의 원자적 클래스 들을 HTML 에 조합해서 UI 를 만드는 방식이야.

🔬 Tailwind 클래스 해부학

<div class="flex items-center gap-4 rounded-xl bg-white p-6 shadow-lg">
  <!-- 영수네 커뮤니티 스터디 카드 -->
</div>

이게 전부야. 복잡한 CSS 규칙 없이, 클래스 이름만 봐도 스타일이 머릿속에 그려져.

⚖️ 전통적인 CSS vs Tailwind CSS

전통 CSS 의 세 가지 고통

1. 네이밍 지옥 (Naming Hell)

/* 🐣 영철: 도대체 이게 맞는 이름인가..? */
.study-card { }
.study-card-wrapper { }
.study-card-container { }        /* wrapper랑 container랑 뭐가 달라..? */
.study-card__header { }
.study-card__header--active { }  /* BEM 지옥 */

2. 스코프 오염 (Cascade Nightmare)

/* card.css */
.title { font-weight: bold; }
 
/* post.css */
.title { color: red; }  /* 😱 어느 .title이 이길지 예측 불가 */

3. 데드 코드 공포 (Dead CSS)
6개월 전에 만든 .old-card-badge 클래스... 지금도 어딘가에 쓰이고 있을까? 아무도 몰라. 삭제했다가 UI 가 깨지면? 영수한테 혼난다.

Tailwind 가 해결하는 방법

1. 네이밍 고민 Zero
클래스 이름을 만들 필요가 없어. bg-blue-500, text-sm, font-bold — 이름이 이미 정해져 있어.

2. 스코프 충돌 Zero
flex 는 항상 display: flex; 야. 어느 파일에서 써도, 어느 컴포넌트에서 써도.

3. 데드 CSS Zero
사용하지 않는 클래스는 빌드 시 자동으로 제거돼. HTML 에 없는 클래스는 CSS 번들에 포함되지 않아.

💻 Before / After: 영수네 커뮤니티 카드 컴포넌트

영수네 커뮤니티의 스터디 그룹 카드를 만든다고 해보자.

❌ 전통 CSS 방식 (순진한 코드)

// 🐣 영철: "이렇게 하면 되겠지? CSS 분리가 맞다고 배웠으니까!"
 
// StudyCard.tsx
export function StudyCard({ title, memberCount, tag }: Props) {
  return (
    // className 이름 짓는 데만 5분...
    <div className="study-card">
      <div className="study-card__header">
        <span className="study-card__tag">{tag}</span>
        <h3 className="study-card__title">{title}</h3>
      </div>
      <div className="study-card__footer">
        <span className="study-card__member-count">
          멤버 {memberCount}명
        </span>
      </div>
    </div>
  );
}

/* StudyCard.module.css */
/* 🐣 영철: CSS 파일 따로 관리하는 게 "깔끔하다"고 생각했던 시절 */
.study-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.study-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.study-card__tag {
  background-color: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  width: fit-content;
}
 
.study-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}
 
.study-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.study-card__member-count {
  font-size: 14px;
  color: #6b7280;
}

총 코드량: TSX 21줄 + CSS 37줄 = 58줄, 파일 2개

✅ Tailwind CSS 방식 (프로 코드)

// 🦁 영호: "이렇게 하면 파일 하나에 모든 스타일 의도가 담겨요.
//           CSS 파일 열 필요 없이 HTML만 봐도 UI가 그려지죠."
 
// StudyCard.tsx
export function StudyCard({ title, memberCount, tag }: Props) {
  return (
    <div className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md">
      <div className="flex flex-col gap-2">
        {/* 태그: 파란 배지 */}
        <span className="w-fit rounded-full bg-blue-100 px-3 py-0.5 text-xs font-semibold text-blue-700">
          {tag}
        </span>
        {/* 제목 */}
        <h3 className="text-lg font-bold leading-snug text-gray-900">
          {title}
        </h3>
      </div>
      <div className="flex items-center justify-between">
        <span className="text-sm text-gray-500">멤버 {memberCount}명</span>
      </div>
    </div>
  );
}

총 코드량: TSX 파일 하나에 18줄, 파일 1개

📊 직접 비교

🚨 영철이가 흔히 저지르는 실수들

실수 1: 인라인 스타일이랑 헷갈리기

{/* 🐣 영철: "이게 인라인 스타일이랑 뭐가 달라요?" */}
 
{/* ❌ 인라인 스타일 — hover, 반응형 불가! */}
<div style={{ padding: '24px', backgroundColor: 'white', borderRadius: '12px' }}>
 
{/* ✅ Tailwind — hover:, md:, dark: 같은 변형(variant) 사용 가능! */}
<div className="p-6 bg-white rounded-xl hover:shadow-lg md:p-8 dark:bg-gray-800">

💡 핵심 차이: 인라인 스타일은 "지금 이 상태만" 적용. Tailwind 는 hover:, md:, dark: 같은 variant(변형) 을 붙여서 조건부 스타일이 가능해.

실수 2: @apply 남용

/* ❌ 영철의 오해: "클래스가 너무 길면 @apply로 묶으면 되겠지!" */
.my-card {
  @apply flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md;
}

{/* 🦁 영호: "영철 님, @apply는 마지막 수단이에요.
    그렇게 하면 Tailwind의 가장 큰 장점인
    '코드와 스타일의 co-location'이 사라져요." */}

올바른 판단 기준:

• 같은 클래스 조합이 3곳 이상에서 반복된다 → React 컴포넌트로 추출
• 컴포넌트 추출이 불가한 상황이다 → 그때만 @apply 고려

실수 3: 클래스 정렬 무시

{/* 🐣 영철: 클래스 순서는 아무래도 상관없겠지~ */}
<div className="shadow-md p-5 flex rounded-xl bg-white gap-3 flex-col border border-gray-200">
 
{/* ✅ 영호가 권장하는 순서: 레이아웃 → 크기 → 간격 → 배경 → 테두리 → 효과 */}
<div className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 shadow-md">

📌 Prettier + prettier-plugin-tailwindcss 를 사용하면 클래스 정렬이 자동으로 되니까, 반드시 설치해두자!

🏁 이번에 배운 내용 총정리

📝 마무리 퀴즈

Q1. 영철이가 hover 상태에서만 배경색을 바꾸고 싶다. 다음 중 올바른 Tailwind 코드는?

① <div style={{ ':hover': { backgroundColor: 'blue' } }}>
② <div className="bg-blue-500:hover">
③ <div className="hover:bg-blue-500">
④ <div className="bg-blue-500 bg-blue-700">

✅ 정답: ③ hover:bg-blue-500

💡 상세 해설:

• 원리 설명: Tailwind 의 variant 시스템은 {variant}:{utility} 형태야. hover:bg-blue-500 은 Tailwind 가 hover\:bg-blue-500:hover { background-color: ... } 라는 CSS 를 생성해줘. 마치 클래스 이름 앞에 상태 접두사를 붙이는 것처럼 직관적이지.
• 오답 피드백: ① 은 인라인 스타일로 hover 를 제어할 수 없어. CSS 는 JS 객체가 아니야. ② 처럼 bg-blue-500:hover 순서는 Tailwind 문법이 아니야. 항상 variant 가 앞에 와. ④ 는 두 배경색을 동시에 선언하는 건데, CSS 우선순위에 따라 후자가 이기지만 hover 상태 제어는 안 돼.
• 📌 핵심 기억법: {상황}:{스타일} — 상황이 먼저, 스타일이 나중. "hover 할 때 bg-blue-500 줘!" 를 코드로 쓰면 hover:bg-blue-500.

Q2. 영수가 "영철 님, CSS 파일이 너무 많아서 수정이 힘들어요. Tailwind 쓰면 어떤 이점이 있죠?"라고 물었다. 가장 핵심적인 답변은?

✅ 정답: "스타일이 HTML 과 공존(co-location)해서, 컴포넌트 파일 하나만 보면 모든 스타일 의도를 파악할 수 있습니다. CSS 파일 찾을 일이 없어요."

💡 상세 해설:

• 원리 설명: Tailwind 의 최대 강점은 co-location — 스타일이 HTML/JSX 와 같은 파일에 있어서 어디서 어떤 스타일이 오는지 추적이 필요 없어. 또한 컴포넌트를 삭제하면 그 안의 클래스도 함께 사라져서 데드 CSS 가 생기지 않아.
• 오답 피드백: "클래스 수가 줄어든다"는 틀려. 오히려 클래스 수는 늘어날 수 있어. 하지만 각 클래스가 단일 책임을 지기 때문에 추적과 수정이 쉬워지는 것이 핵심이야.
• 📌 핵심 기억법: "CSS 파일 = 보물찾기". Tailwind 는 보물지도(스타일) 를 보물 상자(컴포넌트) 안에 같이 넣어둬.

Q3. 영철이가 같은 카드 스타일을 10군데에서 쓰고 있어서 @apply 로 묶으려고 한다. 영호가 대신 제안할 접근법은?

✅ 정답: React 컴포넌트로 추출한다 — <StudyCard /> 같은 재사용 가능한 컴포넌트를 만들어 클래스를 캡슐화.

💡 상세 해설:

• 원리 설명: Tailwind 공식 문서도 강조하는 원칙 — "반복을 줄이는 가장 좋은 방법은 컴포넌트 추출이지, @apply 가 아니다." @apply 는 Tailwind 의 co-location 이점을 무너뜨리고, 결국 전통 CSS 의 단점인 "스타일이 어디 있는지 모르겠다" 문제를 다시 만들어.
• 오답 피드백: @apply 가 완전 나쁜 것 은 아니야. HTML/JSX 가 아닌 써드파티 라이브러리 통합이나 글로벌 base 스타일 작성 시엔 적절히 쓸 수 있어. 하지만 컴포넌트 스코프 안에서 반복을 제거하는 용도로는 쓰지 말자.
• 📌 핵심 기억법: "반복되면 컴포넌트로, 컴포넌트가 불가능하면 그때 @apply."

🐣 영철이의 퇴근 일기

오늘은 Tailwind 를 처음 제대로 파봤다. 솔직히 말하면, 예전에 "클래스 너무 많아서 못 쓰겠다" 고 투덜거렸던 게 좀 부끄럽다.

영호 님이 "CSS 파일을 별도로 관리하는 게 꼭 깔끔한 게 아니에요. 보물을 따로 숨겨두는 것뿐이에요." 라고 하셨는데, 이 말이 머릿속에서 계속 맴돈다.

💡 오늘의 교훈: "길어 보이는 클래스 나열이 사실은 가장 정직한 스타일 선언이다. 숨겨진 CSS 는 없다."

사실 prettier-plugin-tailwindcss 설치하고 나니까 클래스 정렬도 자동으로 되더라. 이거 좀 더 일찍 알았으면 좋았을 텐데. 앞으로 Flexbox 랑 Grid 를 Tailwind 로 어떻게 쓰는지도 익혀야지. 오늘 저녁은 치킨 시켜먹으면서 유튜브 좀 봐야겠다. 😊

🔗 더 알아보기

• Tailwind CSS 공식 - Styling with utility classes
• Tailwind CSS 공식 - Editor Setup (Prettier Plugin)
• Adam Wathan - CSS Utility Classes and "Separation of Concerns"