유틸리티 퍼스트(Utility-First) CSS 프레임워크, Tailwind

Tailwind CSS

Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크이다. 쉽게 말하면, 클래스를 조합해서 스타일을 만드는 도구이다. Tailwind가 제공하는 유틸리티 클래스들을 다양하게 조합하면 추가적인 CSS 코드 작성없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능하다.

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

Tailwind는 CSS 클래스를 직접 정의하지 않고, 미리 정의된 유틸리티 클래스를 조합해서 스타일을 만든다.

<button class="bg-blue-500 text-white px-4 py-2 rounded">Click Me</button>

 

 

---

 

 

Tailwind의 장점

전통적인 CSS 방식은 구조적인 설계와 클래스를 재사용하는 데 강점이 있고, Tailwind CSS는 빠른 스타일링과 유지보수, 일관된 디자인 시스템에 강점을 가지고 있다. 특히 Tailwind는 프론트엔드 프레임워크(React, Vue 등)와 함께 사용할 때 높은 생산성과 효율성이 높아진다.

 

스타일 작성 방식
전통적인 방식에서는 보통 CSS 파일을 따로 만들어 클래스 이름을 정의한 뒤, HTML에서 해당 클래스를 사용한다. 예를 들어, 버튼 스타일을 만들기 위해 .btn-primary라는 클래스를 정의하고 그 안에 색상, 여백, 글자 스타일 등을 작성해야 한다.

 

<!-- HTML -->
<button class="btn-primary">확인</button>

/* CSS */
.btn-primary {
  background-color: #3490dc;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #2779bd;
}

반면, Tailwind CSS는 HTML 태그 안에 직접 **유틸리티 클래스(utility class)**를 조합해서 스타일을 만든다. 예를 들어 bg-blue-500, text-white, rounded, px-4 같은 클래스를 HTML에서 직접 써서 디자인을 구성한다. 이로 인해 CSS 파일 없이도 빠르게 스타일링이 가능해진다.

<!-- Tailwind -->
<button class="bg-blue-500 text-white px-4 py-2 rounded font-bold hover:bg-blue-600">
  확인
</button>

 

 

개발 속도와 효율
Tailwind는 디자인 변경이 필요할 때 HTML만 수정하면 되기 때문에 속도가 매우 빠르다. 별도로 CSS 파일을 찾거나 클래스를 정의하지 않아도 되어, 반복적인 작업이 줄어들고 개발 효율이 높아진다. 반면 전통적인 CSS는 한 번 수정할 때마다 CSS 파일을 열어야 하고, 클래스 이름이 충돌하지 않도록 신경 써야 해서 시간이 더 걸린다.

 

클래스 네이밍과 고민의 차이
전통적인 방식에서는 .card-title, .product-item, .btn-submit 등 의미 있는 클래스 이름을 고민해서 만들어야 한다. 프로젝트가 커질수록 네이밍이 점점 어려워지고 중복되기 쉽다.

Tailwind는 이미 만들어진 유틸리티 클래스들을 사용하기 때문에 클래스 이름을 고민할 필요가 없다. text-lg, mt-4, hover:bg-red-500처럼 목적이 명확한 클래스들을 바로 사용할 수 있다.

<!-- Tailwind -->
<div class="border border-gray-200 p-4 rounded-lg bg-white shadow">
  <h2 class="text-xl font-semibold mb-2">상품명</h2>
  <p class="text-gray-600">이것은 상품 설명입니다.</p>
</div>

 

 

재사용성과 유지보수

전통적인 CSS는 클래스를 잘 설계하면 여러 곳에서 재사용할 수 있어 재사용성이 높다. 하지만 시간이 지남에 따라 정의된 스타일이 많아지고, 수정 시 어디에 영향을 줄지 파악하기 어려워지는 경우가 많다.

Tailwind는 HTML에서 직접 스타일을 조합하는 구조이기 때문에 재사용성은 다소 떨어지지만, 컴포넌트 단위로 구성하면 유지보수가 쉬워지고, 영향 범위를 예측하기 쉬워진다. 특히 React, Vue 같은 컴포넌트 기반 프레임워크와 함께 쓸 때 강력한 장점을 가진다.

 

디자인 일관성과 시스템 구축

Tailwind는 자체적으로 디자인 시스템(색상, 여백, 폰트 크기 등)을 제공한다. 프로젝트 전반에 걸쳐 같은 기준으로 디자인을 구성할 수 있어, 일관성 있는 UI를 만들기 수월하다.
전통적인 CSS는 디자이너나 개발자마다 기준이 달라질 수 있어, 시간이 지날수록 디자인이 흐트러질 위험이 있다.

 

반응형 디자인 처리

전통적인 방식에서는 반응형 디자인을 위해 미디어 쿼리를 직접 작성해야 한다. 예를 들어 @media (min-width: 768px) 같은 구문을 매번 작성해야 한다.

Tailwind는 반응형 디자인도 매우 간단하다. 클래스 앞에 sm:, md:, lg:, xl: 같은 접두어를 붙이기만 하면 된다. 예를 들어 text-sm md:text-base lg:text-lg처럼 한 줄로 화면 크기에 따라 스타일을 조정할 수 있어 편리하다.

<h1 class="text-base sm:text-lg lg:text-2xl">안녕하세요</h1>

<div class="flex flex-col md:flex-row">
  <div class="flex-1 p-4 border">1</div>
  <div class="flex-1 p-4 border">2</div>
</div>

 

 

---

 

 

React 프로젝트에 Tailwind 설치하기

터미널에 아래의 코드를 입력하여 Tailwind를 설치한다.

npm install -D tailwindcss
npx tailwindcss init

 

 

tailwind.config.js와 postcss.config.js 설정 후, CSS 파일에 아래를 추가해줘야 Tailwind가 작동한다.

@tailwind base;
@tailwind components;
@tailwind utilities;