[Tailwind CSS] 01. Tailwind CSS란? 왜 많이 사용할까?

[Tailwind CSS] 01. Tailwind CSS란? 왜 많이 사용할까?

웹 화면을 만들다 보면 버튼, 카드, 입력창, 목록, 반응형 레이아웃처럼 반복해서 꾸며야 하는 요소가 많습니다. 처음에는 CSS 파일을 직접 만들어서 하나씩 스타일을 작성하지만, 프로젝트가 커질수록 CSS가 점점 길어지고 관리하기 어려워집니다.

이런 문제를 해결하기 위해 많이 사용하는 도구가 바로 Tailwind CSS입니다. Tailwind는 미리 정해진 작은 클래스들을 조합해서 화면을 만드는 CSS 프레임워크입니다.

---

1. Tailwind CSS란?

Tailwind CSS는 Utility-First CSS Framework입니다. 여기서 Utility란 하나의 역할만 담당하는 작은 CSS 클래스를 의미합니다.

예를 들어 일반 CSS에서는 버튼을 만들기 위해 아래처럼 클래스를 만들고, CSS 파일에 스타일을 따로 작성합니다.

.button {
  background-color: blue;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
}

그리고 HTML에서는 이렇게 사용합니다.

<button class="button">버튼</button>

반면 Tailwind에서는 CSS 파일에 별도 클래스를 만들지 않고, HTML이나 JSX 안에서 바로 스타일 클래스를 조합합니다.

<button class="bg-blue-600 text-white px-5 py-3 rounded-lg font-bold">
  버튼
</button>

처음 보면 클래스가 많아 보여서 복잡해 보일 수 있습니다. 하지만 익숙해지면 CSS 파일을 왔다 갔다 하지 않아도 되고, 화면을 보면서 빠르게 디자인을 수정할 수 있다는 장점이 있습니다.

---

2. 기존 CSS 방식의 문제점

기존 CSS 방식이 나쁘다는 뜻은 아닙니다. 다만 프로젝트가 커질수록 다음과 같은 문제가 자주 생깁니다.

• 비슷한 버튼 스타일이 여러 개 생긴다.
• 사용하지 않는 CSS가 계속 남는다.
• 클래스 이름을 정하는 데 시간이 걸린다.
• 수정하려고 보면 어디서 적용된 CSS인지 찾기 어렵다.
• 나중에 !important로 덮어씌우는 코드가 늘어난다.

특히 포트폴리오 프로젝트에서는 CSS가 누적되면 코드리뷰에서 공격받기 쉽습니다. 화면은 예뻐 보여도 내부 CSS가 중복되고, 사용하지 않는 코드가 많으면 유지보수 관점에서 좋은 평가를 받기 어렵습니다.

---

3. Tailwind는 어떻게 화면을 꾸밀까?

Tailwind는 작은 클래스들을 조합해서 화면을 만듭니다. 각 클래스는 하나의 역할만 담당합니다.

Tailwind 클래스	의미
bg-blue-600	배경색을 파란색 계열로 지정
text-white	글자색을 흰색으로 지정
px-4	좌우 padding 지정
py-2	위아래 padding 지정
rounded-lg	모서리를 둥글게 처리
font-semibold	글자 굵기를 조금 두껍게 지정

즉, Tailwind는 큰 CSS 클래스를 직접 만드는 방식이 아니라 작은 스타일 조각을 조립하는 방식입니다.

---

4. Tailwind와 Bootstrap의 차이

Tailwind를 처음 배울 때 Bootstrap과 비교하면 이해하기 쉽습니다. Bootstrap은 이미 완성된 컴포넌트를 가져다 쓰는 느낌이 강하고, Tailwind는 직접 조립해서 원하는 디자인을 만드는 느낌이 강합니다.

구분	Bootstrap	Tailwind CSS
방식	완성된 컴포넌트 중심	유틸리티 클래스 조합 중심
디자인 자유도	빠르지만 비슷한 느낌이 나기 쉬움	직접 조절하기 쉬움
초기 학습	비교적 쉬움	클래스 규칙을 익혀야 함
포트폴리오 활용	기본 UI 구현에 적합	직접 디자인한 느낌을 내기 좋음

Bootstrap은 빠르게 화면을 만들 때 좋고, Tailwind는 프로젝트만의 디자인 규칙을 만들고 싶을 때 좋습니다.

---

5. Tailwind를 쓰면 좋은 이유

1) CSS 파일이 불필요하게 커지는 것을 줄일 수 있다

Tailwind는 필요한 스타일을 클래스 조합으로 작성하기 때문에, 별도의 CSS selector를 계속 추가하는 습관을 줄일 수 있습니다. 물론 완전히 CSS 파일이 사라지는 것은 아니지만, 대부분의 화면 스타일을 마크업 안에서 관리할 수 있습니다.

2) 디자인 규칙을 일정하게 유지하기 쉽다

예를 들어 여백을 줄 때도 13px, 17px, 23px처럼 제각각 쓰는 것이 아니라, p-4, px-6, gap-3처럼 정해진 단위로 맞출 수 있습니다.

이렇게 하면 페이지마다 여백이 들쭉날쭉해지는 문제를 줄일 수 있습니다.

3) 반응형 처리가 편하다

Tailwind는 반응형 클래스를 직관적으로 작성할 수 있습니다.

<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열

CSS 미디어쿼리를 따로 길게 작성하지 않아도 반응형 레이아웃을 만들 수 있습니다.

4) 코드리뷰에서 방어하기 좋다

프로젝트를 제출하거나 코드리뷰를 받을 때 중요한 것은 단순히 화면이 예쁜지가 아닙니다. 스타일 코드가 중복되지 않는지, 규칙이 있는지, 유지보수하기 쉬운지도 함께 봅니다.

Tailwind를 잘 사용하면 버튼, 카드, 폼, 테이블 같은 요소의 디자인 규칙을 일정하게 맞출 수 있습니다. 또한 !important로 억지로 덮어씌우는 코드를 줄이는 데도 도움이 됩니다.

---

6. Tailwind를 처음 배울 때 헷갈리는 점

Tailwind를 처음 보면 가장 먼저 이런 생각이 들 수 있습니다.

클래스가 너무 많은데, 이게 정말 좋은 방식인가?

이 의문은 자연스럽습니다. 하지만 Tailwind는 클래스가 많아 보이는 대신, 스타일이 어디에 적용되어 있는지 바로 확인할 수 있습니다.

기존 CSS 방식에서는 HTML 파일과 CSS 파일을 오가며 확인해야 하지만, Tailwind는 해당 태그에 적용된 스타일을 바로 읽을 수 있습니다.

<article class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-bold text-slate-900">카드 제목</h3>
  <p class="mt-2 text-sm text-slate-600">카드 설명입니다.</p>
</article>

위 코드를 보면 카드의 배경, 테두리, 여백, 그림자, 글자 크기까지 한눈에 확인할 수 있습니다.

---

7. Tailwind를 사용할 때 주의할 점

Tailwind도 무작정 쓰면 코드가 지저분해질 수 있습니다. 특히 모든 요소에 클래스를 아무렇게나 붙이면 화면마다 디자인이 달라지고, 오히려 관리하기 어려워질 수 있습니다.

그래서 Tailwind를 사용할 때는 다음 기준을 잡는 것이 좋습니다.

• 색상 규칙을 먼저 정한다.
• 버튼 크기와 모양을 통일한다.
• 카드의 border, padding, radius를 일정하게 맞춘다.
• 페이지마다 제목, 설명, 섹션 간격을 통일한다.
• 불필요한 커스텀 CSS를 계속 추가하지 않는다.

Tailwind는 자유도가 높은 도구입니다. 그래서 자유롭게 쓰는 것보다, 프로젝트만의 규칙을 정해두고 쓰는 것이 훨씬 중요합니다.

---

8. 실무와 포트폴리오에서 Tailwind가 좋은 이유

포트폴리오 프로젝트에서는 기능만큼이나 화면 완성도도 중요합니다. 사용자가 보는 화면이 정돈되어 있으면 프로젝트 전체의 신뢰도가 올라갑니다.

Tailwind는 다음과 같은 상황에서 특히 유용합니다.

• React, Vue 같은 컴포넌트 기반 프로젝트
• 반응형 화면이 필요한 프로젝트
• 기존 CSS가 너무 많이 누적된 프로젝트
• 페이지마다 디자인 톤을 통일해야 하는 프로젝트
• 빠르게 UI를 만들고 계속 다듬어야 하는 프로젝트

특히 React에서는 컴포넌트 단위로 UI를 나누기 때문에 Tailwind와 잘 맞습니다. 버튼, 카드, 입력창, 모달 같은 요소를 컴포넌트로 만들고, 그 안에 Tailwind 클래스를 정리하면 재사용하기 좋습니다.

---

9. 간단한 예제로 보는 Tailwind

아래는 Tailwind로 만든 간단한 카드 예시입니다.

<div class="max-w-sm rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
  <p class="text-sm font-semibold text-blue-600">Tailwind CSS</p>
  <h3 class="mt-2 text-xl font-bold text-slate-900">
    빠르게 만드는 UI
  </h3>
  <p class="mt-3 text-sm leading-6 text-slate-600">
    Tailwind는 작은 유틸리티 클래스를 조합해서
    일관된 화면을 만들 수 있게 도와줍니다.
  </p>
  <button class="mt-5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
    시작하기
  </button>
</div>

이 코드에서는 별도의 CSS 파일을 만들지 않았지만, 카드 형태의 UI를 만들 수 있습니다.

---

10. 정리

Tailwind CSS는 작은 유틸리티 클래스를 조합해서 화면을 만드는 CSS 프레임워크입니다. 처음에는 클래스가 많아 보여 낯설 수 있지만, 익숙해지면 CSS 파일을 줄이고 UI 규칙을 일정하게 유지하는 데 큰 도움이 됩니다.

이번 글에서는 Tailwind가 무엇인지, 기존 CSS 방식과 어떤 차이가 있는지, 왜 많이 사용하는지 알아보았습니다.

다음 글에서는 실제로 Vite + React 프로젝트에 Tailwind CSS를 설치하는 방법을 정리해보겠습니다.

---

다음 편 예고

[Tailwind CSS] 02. Vite + React 프로젝트에 Tailwind 설치하기

다음 편에서는 설치 명령어, CSS import, Vite 설정, 실행 확인까지 차근차근 진행하겠습니다.