Blog

Tailwind CSS란 무엇이고, 왜 많이 사용되는가

6 min read

서론#

CSS를 직접 작성하던 시기에는
스타일을 어디에 두고, 어떻게 관리해야 할지 항상 고민이 많았다.

클래스 이름을 짓는 것도 쉽지 않았고,
컴포넌트가 늘어날수록 CSS 파일을 따라가기가 점점 어려워졌다.

Tailwind CSS는 이런 문제를 해결해준다고 소개되는 경우가 많았는데,
처음 봤을 때는 오히려 클래스가 더 복잡해 보였다.

그럼에도 불구하고 많은 프로젝트에서 Tailwind를 사용하는 이유가 궁금해졌고,
이 글은 그 이유를 정리한 기록이다.

Tailwind CSS란?#

Tailwind CSS는
미리 정의된 유틸리티 클래스를 조합해 스타일을 만드는 CSS 프레임워크다.

<div class="flex items-center justify-between bg-white p-4">...</div>

이처럼 display, padding, color 같은 스타일 속성을
짧은 클래스 단위로 제공하고,
이를 조합해 화면을 구성하는 방식이다.

Tailwind에서는
별도의 CSS 파일을 작성하지 않고도
HTML(또는 JSX) 안에서 스타일을 완성할 수 있다.

기존 CSS 방식과의 차이#

기존 방식에서는 보통 다음과 같은 흐름을 따른다.

  1. 클래스 이름을 만든다
  2. CSS 파일에 스타일을 정의한다
  3. HTML에서 해당 클래스를 사용한다

Tailwind는 이와 반대로, 미리 정의된 클래스를 HTML에서 직접 사용한다.
이렇게 하면 CSS 파일을 따로 작성할 필요가 없어진다.

.card {
  padding: 16px;
  background: white;
  border-radius: 8px;
}

<div class="card">...</div>

반면 Tailwind에서는
클래스를 만드는 과정 자체가 없다.

<div class="rounded-lg bg-white p-4">...</div>

스타일과 구조가 한 곳에 모이게 되면서
“이 요소가 왜 이렇게 보이는지”를
클래스만 보고 바로 알 수 있다는 차이가 생긴다.

Utility-First라는 개념#

Tailwind의 핵심은 Utility-First라는 접근 방식이다.

  • 하나의 클래스 = 하나의 스타일 역할
  • 재사용은 클래스 이름이 아니라 조합으로 이루어진다

이 방식에서는
.card, .button-primary 같은 의미 기반 클래스보다
p-4, text-sm, bg-gray-100처럼
역할이 명확한 단위가 우선된다.

처음에는 클래스가 길어지는 단점이 있지만,
스타일의 출처를 추적하는 비용은 줄어든다.

왜 클래스가 길어져도 쓰일까?#

Tailwind를 처음 접하면
“이렇게 클래스가 많아도 괜찮은가?”라는 의문이 든다.

<button class="rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-white"></button>

하지만 이 방식에는 다음과 같은 특징이 있다.

  • CSS 파일을 넘나들 필요가 없다
  • 클래스 이름 충돌을 신경 쓰지 않아도 된다
  • 스타일이 적용되는 조건이 코드에 바로 드러난다

즉,
복잡함이 숨겨지지 않고 드러나 있는 구조다.

설정으로 통제할 수 있는 구조#

Tailwind는
아무 규칙 없이 클래스를 나열하는 도구는 아니다.

tailwind.config.js를 통해
색상, 간격, 폰트 크기 등을 제한할 수 있고,
프로젝트 전체에서 사용하는 디자인 기준을 한 곳에서 관리할 수 있다.

이 덕분에
무분별한 스타일 확장이 아니라,
정해진 범위 안에서의 조합이 가능해진다.

왜 많이 사용되는가?#

Tailwind가 많이 사용되는 이유는
단순히 “편해서”라기보다는
문제를 줄이는 방향으로 설계되어 있기 때문이라고 느꼈다.

  • 클래스 네이밍 고민 감소
  • 스타일 충돌 가능성 감소
  • 컴포넌트 단위로 스타일을 이해하기 쉬움
  • 설정 파일을 통한 일관성 유지

이 모든 점이
규모가 커질수록 체감되기 쉬운 장점이다.

정리#

Tailwind CSS는
CSS를 없애는 도구가 아니라,
CSS를 다루는 방식을 바꾸는 도구에 가깝다.

클래스가 많아지는 단점은 분명 존재하지만,
그 장점으로 스타일의 흐름이 명확해진다.

그래서 Tailwind는
처음엔 낯설지만,
이해할수록 왜 선택되는지 납득하게 되는 도구라고 생각한다.

관련 게시글

4개