[Tailwind CSS] 03. Utility Class 개념 이해하기

[Tailwind CSS] 03. Utility Class 개념 이해하기

지난 글에서는 Vite + React 프로젝트에 Tailwind CSS를 설치하는 방법을 알아보았습니다. 이번 글에서는 Tailwind를 사용할 때 가장 중요한 개념인 Utility Class에 대해 정리해보겠습니다.

Tailwind를 처음 보면 클래스 이름이 길고 많아 보여서 어렵게 느껴질 수 있습니다. 하지만 규칙을 알고 보면 대부분의 클래스는 하나의 스타일 역할을 가진 작은 조각입니다.

---

1. Utility Class란?

Utility Class는 하나의 역할만 담당하는 작은 CSS 클래스입니다. 예를 들어 배경색을 바꾸는 클래스, 글자색을 바꾸는 클래스, 여백을 주는 클래스가 각각 따로 존재합니다.

클래스	역할
bg-blue-600	배경색을 파란색 계열로 지정
text-white	글자색을 흰색으로 지정
p-4	상하좌우 padding 지정
rounded-lg	모서리를 둥글게 처리

즉, Tailwind는 CSS 클래스를 직접 새로 만드는 대신 이미 준비된 작은 클래스들을 조합해서 UI를 만듭니다.

---

2. 기존 CSS 방식과 Tailwind 방식 비교

기존 CSS 방식에서는 먼저 클래스 이름을 만들고, CSS 파일에서 스타일을 작성합니다.

.card {
  background-color: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

그리고 HTML이나 JSX에서는 만든 클래스를 사용합니다.

<div class="card">
  카드 내용
</div>

Tailwind 방식에서는 별도의 .card 클래스를 만들지 않고, 필요한 스타일을 바로 조합합니다.

<div class="bg-white p-6 rounded-2xl shadow-md">
  카드 내용
</div>

처음에는 Tailwind 코드가 더 길어 보일 수 있습니다. 하지만 스타일이 어디에 적용되어 있는지 바로 보이고, CSS 파일을 왔다 갔다 하지 않아도 된다는 장점이 있습니다.

---

3. Tailwind 클래스 이름 읽는 법

Tailwind 클래스는 대부분 일정한 규칙을 가지고 있습니다. 처음부터 모든 클래스를 외우려고 하기보다, 이름이 어떤 구조로 되어 있는지 이해하는 것이 중요합니다.

1) 색상 관련 클래스

<button class="bg-blue-600 text-white">
  버튼
</button>

• bg-blue-600 : 배경색을 blue 계열 600 단계로 지정
• text-white : 글자색을 흰색으로 지정

여기서 bg는 background, text는 글자 색상 또는 글자 크기와 관련된 클래스에 자주 사용됩니다.

2) 여백 관련 클래스

<div class="p-6 mt-4 mb-8">
  내용
</div>

클래스	의미
p-6	상하좌우 padding
mt-4	margin-top
mb-8	margin-bottom

여백 클래스는 Tailwind에서 매우 자주 사용합니다. m은 margin, p는 padding을 의미합니다.

3) 방향이 들어간 여백 클래스

클래스	의미
mt-4	위쪽 margin
mb-4	아래쪽 margin
ml-4	왼쪽 margin
mr-4	오른쪽 margin
mx-4	좌우 margin
my-4	상하 margin

padding도 같은 규칙으로 사용할 수 있습니다. 예를 들어 px-4는 좌우 padding, py-2는 상하 padding입니다.

---

4. 자주 쓰는 Utility Class 종류

Tailwind에서 자주 사용하는 클래스는 크게 몇 가지 그룹으로 나눌 수 있습니다.

분류	예시	설명
색상	bg-blue-600, text-white	배경색, 글자색 지정
여백	p-4, mt-6, gap-3	padding, margin, 간격 지정
글자	text-sm, font-bold	글자 크기, 굵기 지정
레이아웃	flex, grid, items-center	배치 방식 지정
테두리	border, rounded-lg	테두리와 모서리 지정
효과	shadow-md, opacity-80	그림자, 투명도 등 시각 효과

처음에는 모든 클래스를 외우려고 하지 않아도 됩니다. 자주 쓰는 그룹부터 익숙해지면 나머지는 자연스럽게 늘어납니다.

---

5. 버튼 예제로 Utility Class 이해하기

아래 버튼 코드를 보면서 Tailwind 클래스가 어떤 역할을 하는지 하나씩 확인해보겠습니다.

<button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
  저장하기
</button>

클래스	역할
rounded-lg	버튼 모서리를 둥글게 처리
bg-blue-600	기본 배경색 지정
px-5	좌우 padding 지정
py-3	상하 padding 지정
text-sm	글자 크기를 작게 지정
font-semibold	글자 굵기를 조금 두껍게 지정
text-white	글자색을 흰색으로 지정
shadow-sm	작은 그림자 적용
hover:bg-blue-700	마우스를 올렸을 때 배경색 변경

이처럼 Tailwind 코드는 길어 보이지만, 하나씩 나누어 보면 대부분 읽을 수 있는 구조입니다.

---

6. 상태를 표현하는 hover, focus, active

Tailwind에서는 hover:, focus:, active: 같은 접두어를 사용해서 특정 상태일 때만 스타일을 적용할 수 있습니다.

<button class="bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800">
  클릭하기
</button>

• bg-blue-600 : 기본 배경색
• hover:bg-blue-700 : 마우스를 올렸을 때 배경색
• active:bg-blue-800 : 클릭하고 있는 순간의 배경색

기존 CSS에서는 :hover, :active 같은 선택자를 따로 작성해야 했지만, Tailwind에서는 클래스 앞에 상태 prefix를 붙여서 표현할 수 있습니다.

---

7. 반응형을 표현하는 sm, md, lg

Tailwind에서는 화면 크기에 따라 다른 스타일을 적용할 수도 있습니다. 대표적으로 sm:, md:, lg:, xl: 같은 prefix를 사용합니다.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

• grid-cols-1 : 기본 화면에서는 1열
• md:grid-cols-2 : 중간 크기 화면부터 2열
• lg:grid-cols-3 : 큰 화면부터 3열
• gap-4 : 요소 사이 간격 지정

이 방식은 미디어쿼리를 직접 작성하지 않아도 반응형 레이아웃을 만들 수 있어서 매우 편리합니다.

---

8. React에서는 class가 아니라 className

React에서 Tailwind를 사용할 때는 주의할 점이 있습니다. HTML에서는 class를 사용하지만, JSX에서는 className을 사용해야 합니다.

HTML에서는 아래처럼 작성합니다.

<button class="bg-blue-600 text-white">
  버튼
</button>

React JSX에서는 아래처럼 작성합니다.

function Button() {
  return (
    <button className="bg-blue-600 text-white">
      버튼
    </button>
  )
}

이 부분은 Tailwind 문제가 아니라 React JSX 문법입니다. React 프로젝트에서 Tailwind가 적용되지 않는다고 느낄 때, class와 className을 헷갈리지 않았는지 확인해보는 것이 좋습니다.

---

9. Utility Class를 사용할 때 좋은 습관

Tailwind는 빠르게 UI를 만들 수 있지만, 아무렇게나 쓰면 클래스가 너무 길어지고 디자인이 들쭉날쭉해질 수 있습니다. 처음부터 아래 기준을 잡고 사용하는 것이 좋습니다.

• 색상은 프로젝트에서 자주 쓸 색상 위주로 통일한다.
• 버튼의 padding, radius, font-weight를 일정하게 맞춘다.
• 카드 UI의 border, shadow, padding 규칙을 통일한다.
• 페이지 제목, 설명, 섹션 간격을 반복 가능한 패턴으로 만든다.
• 같은 요소에 충돌하는 클래스를 여러 개 넣지 않는다.

예를 들어 아래 코드는 좋지 않습니다.

<div class="p-4 p-8 text-sm text-xl">
  내용
</div>

p-4와 p-8, text-sm과 text-xl처럼 같은 속성을 바꾸는 클래스가 동시에 들어가면 읽기 어려운 코드가 됩니다. 처음부터 하나의 기준을 정해서 사용하는 것이 좋습니다.

---

10. 간단한 카드 UI 만들어보기

지금까지 배운 Utility Class를 사용해서 간단한 카드 UI를 만들어보겠습니다.

function App() {
  return (
    <main className="min-h-screen bg-slate-50 px-6 py-10">
      <section className="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <p className="text-sm font-semibold text-blue-600">
          Tailwind CSS
        </p>

        <h1 className="mt-3 text-2xl font-bold text-slate-900">
          Utility Class 이해하기
        </h1>

        <p className="mt-4 text-sm leading-6 text-slate-600">
          Tailwind는 작은 유틸리티 클래스를 조합해서
          빠르고 일관된 UI를 만들 수 있게 도와줍니다.
        </p>

        <button className="mt-6 rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700">
          자세히 보기
        </button>
      </section>
    </main>
  )
}

export default App

위 예제에는 배경색, 최대 너비, 여백, 테두리, 둥근 모서리, 그림자, 글자 크기, 버튼 hover 효과가 모두 들어 있습니다. 이처럼 Tailwind는 작은 클래스를 조합해서 하나의 완성된 UI를 만드는 방식입니다.

---

11. 처음 배울 때 외우면 좋은 기본 클래스

처음부터 모든 클래스를 외울 필요는 없습니다. 아래 클래스들만 익숙해져도 기본 UI를 만드는 데 큰 문제가 없습니다.

목적	자주 쓰는 클래스
가운데 정렬	mx-auto, flex, items-center, justify-center
여백	p-4, p-6, mt-4, gap-4
글자	text-sm, text-xl, font-bold, text-slate-600
박스	bg-white, rounded-xl, border, shadow-sm
크기	w-full, max-w-md, min-h-screen

---

12. 정리

이번 글에서는 Tailwind CSS의 핵심 개념인 Utility Class에 대해 알아보았습니다. Utility Class는 하나의 역할만 담당하는 작은 클래스이며, 이 클래스들을 조합해서 화면을 구성합니다.

처음에는 클래스가 많아 보여 어렵게 느껴질 수 있지만, 이름 규칙을 이해하면 훨씬 쉽게 읽을 수 있습니다. 특히 색상, 여백, 글자, 레이아웃, 테두리 관련 클래스부터 익숙해지는 것이 좋습니다.

Tailwind를 잘 사용하려면 모든 클래스를 외우기보다 클래스를 읽는 규칙을 익히는 것이 중요합니다.

---

다음 편 예고

[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기

다음 글에서는 bg-blue-600, text-slate-700, text-xl, font-bold처럼 화면의 분위기를 결정하는 색상과 글자 관련 클래스를 정리해보겠습니다.

---

GWDEVELBlog