React Tailwind CSS 사용 - (1)

세번째 팀프로젝트를 시작했습니다.

이 전 프로젝트에서는 컴포넌트간 스타일 충돌을 방지하기 위한 도구로
module.css를 이용했는데, 이번에는 Tailwind CSS를 이용해보려고 합니다.

1. Tailwind CSS란 ?

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.
즉, 재사용 가능한 CSS 클래스(유틸리티 클래스)를 제공하여, HTML에서 바로 스타일을 적용할 수 있습니다.
Tailwind는 전통적인 방식(BEM, SCSS 등)과 달리, CSS를 작성하는 대신 HTML에서 직접 스타일링하도록 설계되었습니다.

Tailwind CSS의 간단한 사용법과 함께 채택한 이유에 대해 말씀드리겠습니다.

2. Tailwind CSS를 채택한 이유

2-1. 빠르고 편리한 개발

Tailwind CSS는 CSS 작성 없이 HTML에 유틸리티 클래스를 추가하여 즉각적인 스타일링이 가능합니다.

별도의 CSS 파일 작성이나 클래스 네이밍 규칙 고민이 줄어들어 생산성을 높입니다.

예시

<!-- Tailwind 사용 전 -->
<div class="card">
  <h1 class="card-title">Title</h1>
  <p class="card-content">Content</p>
</div>

/* CSS */
.card {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
}

.card-content {
  font-size: 16px;
}

<!-- Tailwind 사용 후 -->
<div class="bg-gray-100 p-4 rounded-lg">
  <h1 class="text-2xl font-bold">Title</h1>
  <p class="text-base">Content</p>
</div>

2-2. 유지보수 용이

Tailwind CSS는 CSS 파일 작성 및 관리의 복잡성을 제거하여 유지보수를 쉽게 만듭니다.

컴포넌트 기반 개발 방식과 잘 어울리며, 팀원 간의 협업 시 스타일링 충돌을 최소화합니다.

2-3. 반응형 디자인 간편

Tailwind CSS는 반응형 유틸리티(sm:, md:, lg:, xl:)를 통해 쉽고 직관적인 반응형 디자인을 지원합니다.

미디어 쿼리를 직접 작성할 필요 없이 클래스만 추가하면 됩니다.

물론 이번 프로젝트에서는 반응형 디자인이 필요가 없지만, ( 하이브리드 앱 개발이므로 )
이러한 장점들도 있다는 정도로 알아두시면 될 것 같습니다.

접두사	화면 크기 (최소 너비)	설명
sm:	640px 이상	작은 화면(작은 태블릿 이상)에서 스타일 적용.
md:	768px 이상	중간 화면(태블릿 이상)에서 스타일 적용.
lg:	1024px 이상	큰 화면(작은 노트북 이상)에서 스타일 적용.
xl:	1280px 이상	더 큰 화면(데스크톱 이상)에서 스타일 적용.
2xl:	1536px 이상	초대형 화면(고해상도 모니터 등)에서 스타일 적용.

예시

<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  반응형 텍스트
</div>

작동 방식:

1. 모바일 기본: text-base → 기본 텍스트 크기(모바일 화면에서 적용).
2. 작은 화면 이상 (sm): text-lg → 화면이 640px 이상일 때 텍스트 크기 증가.
3. 중간 화면 이상 (md): text-xl → 화면이 768px 이상일 때 텍스트 크기 더 증가.
4. 큰 화면 이상 (lg): text-2xl → 화면이 1024px 이상일 때 적용.
5. 더 큰 화면 이상 (xl): text-3xl → 화면이 1280px 이상일 때 적용.

2-4. 커스터마이징 가능

Tailwind CSS는 tailwind.config.js 파일을 통해 색상, 폰트, 스페이싱, 브레이크포인트 등을 프로젝트 요구사항에 맞게 커스터마이징할 수 있습니다.

예시

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1e40af', // 팀 컬러 추가 (자주 사용하는 컬러)
      },
    },
  },
};

사용

<div class="bg-brand text-white">팀 컬러 사용</div>

이번 포스트는 여기까지입니다.

다음 포스트에서는 Tailwind CSS의 기본 문법과 사용법, 자주 사용하는 유틸리티 클래스 등에 대해 알아보겠습니다.