어제 오늘 내일

React에서 Tailwind CSS 제대로 활용하기 (설치, 활용) 본문

IT/React

React에서 Tailwind CSS 제대로 활용하기 (설치, 활용)

hi.anna 2026. 8. 7. 14:50

1. 들어가며

Tailwind CSS란 무엇인가

Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합해서 스타일을 만드는 utility-first CSS 프레임워크입니다. Bootstrap처럼 완성된 컴포넌트(버튼, 카드 등)를 제공하는 대신, flex, p-4, text-center, bg-blue-500 같은 작은 단위의 클래스를 조합해서 원하는 디자인을 직접 만들어가는 방식이에요.

<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  버튼
</button>

별도의 CSS 파일을 오가지 않고 마크업 안에서 스타일을 완결할 수 있다는 게 가장 큰 특징입니다.

왜 React와 함께 많이 쓰이는가

React는 컴포넌트 단위로 UI를 쪼개서 개발합니다. 이때 CSS도 컴포넌트 단위로 캡슐화되어야 관리가 편한데, Tailwind는 클래스 자체가 컴포넌트의 스타일 명세서 역할을 하기 때문에 궁합이 좋습니다.

  • 클래스명 짓는 고민이 사라짐 (.btn-primary-active-large 같은 네이밍 지옥 탈출)
  • 컴포넌트 파일 하나만 봐도 스타일까지 한눈에 파악 가능
  • 컴포넌트를 재사용할 때 스타일도 함께 따라옴

2. Tailwind CSS 설치 및 설정

Vite 프로젝트에 설치하기

가장 널리 쓰이는 Vite 기준 설치 과정입니다.

npm create vite@latest my-app -- --template react
cd my-app
npm install tailwindcss @tailwindcss/vite

vite.config.js에 플러그인을 추가합니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

src/index.css에 아래 한 줄만 추가하면 준비 끝입니다.

@import "tailwindcss";

Next.js 프로젝트에 설치하기

Next.js는 create-next-app 실행 시 Tailwind 사용 여부를 물어보는 옵션이 있어 처음부터 설정할 수 있습니다. 이미 만든 프로젝트라면 위와 비슷하게 패키지를 설치하고 globals.css에 @import "tailwindcss";를 추가하면 됩니다.

3. 기본 사용법

유틸리티 클래스 개념 이해하기

Tailwind의 클래스는 대부분 CSS 속성 하나에 대응합니다.

클래스 의미
flex display: flex
p-4 padding: 1rem
text-lg font-size: 1.125rem
bg-red-500 배경색 지정
rounded-md border-radius 지정

숫자(4, 8 등)는 대부분 0.25rem 단위의 간격 스케일을 따릅니다. p-4는 1rem, p-8은 2rem이 되는 식입니다.

자주 쓰는 클래스 조합 예시

function Card() {
  return (
    <div className="max-w-sm mx-auto p-6 bg-white rounded-xl shadow-md">
      <h2 className="text-xl font-bold text-gray-800 mb-2">카드 제목</h2>
      <p className="text-gray-600 leading-relaxed">
        카드 본문 내용이 들어가는 자리입니다.
      </p>
    </div>
  )
}

레이아웃(flex, grid), 간격(p-, m-, gap-), 타이포그래피(text-, font-), 색상(bg-, text-, border-) 이 네 가지 카테고리만 익혀도 웬만한 화면은 만들 수 있습니다.

4. React 컴포넌트에 Tailwind 적용하기

JSX에서 className 다루기

React에서는 class 대신 className을 사용한다는 점만 주의하면 HTML과 동일하게 사용할 수 있습니다.

조건부 스타일링

props나 state에 따라 클래스를 다르게 주고 싶을 때가 많습니다. 삼항 연산자로도 가능하지만, 조건이 늘어나면 가독성이 떨어지기 때문에 clsx 같은 라이브러리를 함께 쓰는 걸 추천합니다.

npm install clsx
import clsx from 'clsx'

function Button({ variant, disabled, children }) {
  return (
    <button
      className={clsx(
        // 항상 적용되는 기본 스타일
        'px-4 py-2 rounded-lg font-medium transition',
        // variant가 'primary'일 때만 적용
        variant === 'primary' && 'bg-blue-500 text-white hover:bg-blue-600',
        // variant가 'secondary'일 때만 적용
        variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
        // disabled가 true일 때만 추가로 적용 (falsy면 무시됨)
        disabled && 'opacity-50 cursor-not-allowed'
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

clsx는 인자로 전달된 값들을 순서대로 검사해서, false나 undefined처럼 falsy한 값은 무시하고 문자열만 골라 하나의 className으로 합쳐줍니다. 조건마다 삼항 연산자를 겹겹이 쓰는 대신 조건 && '클래스명' 형태로 나열만 하면 되기 때문에 조건이 많아져도 가독성이 유지됩니다.

재사용 가능한 컴포넌트로 스타일 추출하기

같은 스타일 조합이 여러 곳에서 반복된다면, 그때는 컴포넌트로 분리하는 게 Tailwind에서 코드 중복을 관리하는 정석적인 방법입니다. CSS를 추출하기보다 컴포넌트를 추출한다고 생각하면 이해가 쉽습니다.

5. 반응형 디자인 구현

브레이크포인트 개념

Tailwind는 모바일 우선(mobile-first) 방식입니다. 접두사가 없는 클래스는 모든 화면에 적용되고, sm:, md:, lg:, xl:, 2xl: 접두사를 붙이면 해당 크기 이상에서만 적용됩니다.

접두사 최소 너비
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

실전 예제

function ResponsiveGrid() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
      <div className="bg-blue-100 p-4 rounded-lg">아이템 1</div>
      <div className="bg-blue-100 p-4 rounded-lg">아이템 2</div>
      <div className="bg-blue-100 p-4 rounded-lg">아이템 3</div>
    </div>
  )
}

모바일에서는 1열, 태블릿(sm 이상)에서는 2열, 데스크톱(lg 이상)에서는 3열로 자동 변경됩니다.

6. 다크 모드 지원

dark: 접두사 활용법

dark: 접두사를 클래스 앞에 붙이면 다크 모드일 때만 적용되는 스타일을 지정할 수 있습니다.

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
  다크모드 대응 컴포넌트
</div>

React state와 연동한 토글 구현

기본적으로 시스템 설정을 따르지만, 사용자가 직접 토글할 수 있게 하려면 class 전략을 사용하고 <html> 태그에 dark 클래스를 붙였다 뗐다 하는 방식으로 구현합니다.

import { useState, useEffect } from 'react'

function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark)
  }, [isDark])

  return (
    <button
      onClick={() => setIsDark(!isDark)}
      className="px-3 py-1.5 rounded-md bg-gray-200 dark:bg-gray-700 dark:text-white"
    >
      {isDark ? '라이트 모드' : '다크 모드'}
    </button>
  )
}

7. 커스터마이징

커스텀 색상·폰트·간격 설정

최신 버전에서는 CSS 파일 안에서 @theme 블록으로 디자인 토큰을 직접 정의합니다.

@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-display: "Pretendard", sans-serif;
}

이렇게 정의하면 bg-brand, font-display 같은 클래스를 바로 사용할 수 있습니다. --color-brand처럼 --color-* 네임스페이스로 정의한 변수는 color-brand라는 클래스가 생기는 게 아니라, bg-, text-, border- 등 색상 관련 유틸리티 뒤에 이름을 붙여 bg-brand, text-brand, border-brand 형태로 사용됩니다. --font-display도 같은 방식으로 font-display 유틸리티 클래스에 연결됩니다.

@apply로 반복 스타일 관리하기

정말 자주 반복되는 조합은 @apply로 별도 클래스에 묶어둘 수 있습니다. 다만 남용하면 utility-first의 장점이 사라지므로 꼭 필요한 곳에만 제한적으로 사용하는 걸 권장합니다.

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
}

이렇게 만든 클래스는 일반 CSS 클래스와 똑같이 React 컴포넌트의 className에 그대로 가져다 쓸 수 있습니다.

function SubmitButton() {
  return <button className="btn-primary">제출하기</button>
}

버튼, 인풋, 배지처럼 프로젝트 전반에서 반복되는 UI 요소의 기본 스타일을 이런 식으로 하나의 클래스에 묶어두면, 마크업이 짧아지고 디자인이 바뀔 때도 CSS 한 곳만 수정하면 되는 장점이 있습니다.

8. 다른 스타일링 방식과 비교

방식 장점 단점
Tailwind CSS 빠른 개발 속도, 일관된 디자인 시스템, 별도 파일 불필요 초기 학습 곡선, JSX가 다소 길어짐
CSS Modules 순수 CSS 문법, 클래스 충돌 없음 파일을 오가야 함, 네이밍 필요
styled-components JS 안에서 동적 스타일링 자유도 높음 런타임 비용, 번들 크기 증가

정답은 없습니다. 빠른 프로토타이핑이나 디자인 시스템 일관성이 중요하다면 Tailwind가, 컴포넌트 단위로 완전히 격리된 스타일이 필요하다면 CSS Modules가 더 유리할 수 있습니다.

9. 실전 팁 & 자주 하는 실수

  • 클래스명이 너무 길어질 때: clsx나 tailwind-merge를 활용해 조건부 로직을 분리하고, 반복되는 조합은 컴포넌트로 추출하세요.
  • 동적 클래스명 조합 주의: `text-${color}-500` 처럼 문자열을 동적으로 조합하면 Tailwind가 해당 클래스를 스캔하지 못해 스타일이 누락될 수 있습니다. 가능하면 완전한 클래스명을 그대로 사용하세요.
  • VSCode 확장 프로그램: Tailwind CSS IntelliSense를 설치하면 클래스 자동완성, 색상 미리보기, 실시간 값 확인이 가능해 생산성이 크게 올라갑니다.
  • 불필요한 CSS 최소화: 최신 버전은 사용된 클래스만 자동으로 스캔해서 빌드하므로, 별도 purge 설정 없이도 최종 번들이 가볍게 유지됩니다.

10. 마무리

Tailwind CSS는 React의 컴포넌트 기반 철학과 잘 맞아떨어지는 스타일링 도구입니다. 처음에는 클래스명이 낯설고 마크업이 복잡해 보일 수 있지만, 익숙해지면 별도 CSS 파일을 오가지 않고도 빠르게 UI를 완성할 수 있다는 장점이 크게 느껴질 거예요.

실무에 적용할 때는 팀의 디자인 시스템, 프로젝트 규모, 협업 방식을 고려해서 CSS Modules나 styled-components와 비교해보고 선택하는 것을 추천합니다.

반응형
저작자표시 (새창열림)

'IT > React' 카테고리의 다른 글

clsx로 React 조건부 클래스 깔끔하게 관리하기  (0) 2026.08.07
tailwind-merge로 Tailwind 클래스 충돌 깔끔하게 해결하기  (0) 2026.08.07
[ React ] useReducer 사용법: 복잡한 상태 로직을 체계적으로 관리하기  (0) 2026.08.07
[ React ] useCallback 사용법: 함수를 메모이제이션해 리렌더링 최적화하기  (0) 2026.08.07
[React] JSX 기초 완벽 가이드: React의 화면을 그리는 문법  (0) 2026.08.03
공유하기 링크
'IT/React' Related Articles more
Comments