[React] Tailwind 사용하여 스타일링 하기

 

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

 

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.

기존의 class="btn primary" 같은 추상적인 클래스명 대신, class="bg-blue-500 text-white p-4 rounded"처럼 직관적인 유틸리티 클래스들을 조합해서 스타일을 만듭니다.

설치 방법

프로젝트에 Tailwind 설치 (예: Vite 기준)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설정 파일 (tailwind.config.js) 예시

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

전역 CSS 파일 설정 (index.css 등)

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

사용법

1️⃣ 기본 사용법

Tailwind는 미리 정의된 수많은 클래스들로 구성되어 있어서, 따로 .css 파일 없이도 className을 통해 바로 스타일을 만들 수 있습니다.

<button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  로그인
</button>

위 예시처럼 bg-blue-500, text-white, px-4, rounded 등은 각각의 스타일 속성 하나에 대응하는 클래스입니다.

2️⃣ 접두어로 반응형 디자인 구성

sm:, md:, lg: 같은 접두어만 붙이면 화면 크기에 따라 반응형 스타일링이 가능합니다.

<div className="text-base md:text-xl lg:text-2xl">
  스크린 크기에 따라 글자 크기 변화
</div>

• 기본은 text-base
• 768px 이상(md): text-xl
• 1024px 이상(lg): text-2xl

이처럼 미디어 쿼리도 직관적인 접두어로 처리할 수 있습니다.

3️⃣ 접두어로 가상 선택자 처리

마우스를 올렸을 때, 클릭했을 때, 포커스됐을 때 등 가상 선택자도 접두어로 처리합니다.

<button className="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:scale-95">
  상호작용 가능한 버튼
</button>

• hover:bg-blue-600: 마우스를 올리면 배경색 변경
• focus:ring-2: 포커스 시 ring 효과
• active:scale-95: 클릭 시 약간 작아지는 애니메이션

Tailwind의 진짜 강점은 반응형 접두어 + 상태 접두어를 조합해서 사용할 수 있다는 점입니다.

<button className="bg-blue-500 hover:bg-blue-600 md:hover:bg-green-500">
  반응형 hover 버튼
</button>

• 작은 화면에서는 hover:bg-blue-600
• md 이상에서는 hover:bg-green-500

이렇게 화면 크기와 상태를 동시에 고려한 스타일도 아주 간결하게 구현할 수 있습니다.

자주 쓰는 클래스 예시

목적 클래스 예시

배경색	bg-red-500, bg-gray-100
글자 색	text-white, text-gray-800
마진/패딩	m-4, mt-2, p-6, px-4
폰트 스타일	font-bold, text-xl, tracking-wide
정렬	flex, justify-between, items-center
버튼 꾸미기	hover:bg-blue-700, rounded, shadow

장점 및 단점

• 스타일 충돌 걱정 없음 (클래스를 직접 조합)
• 반응형, 상태 변화도 직관적인 클래스 조합
• 따로 CSS 파일 안 만들어도 돼서 빠름
• ⚠️ 하지만 클래스가 너무 많아지면 가독성이 떨어질 수도 있음
• → clsx, classnames, 컴포넌트 분리로 해결 가능

 

🎯 팁: 클래스 너무 길어져 가독성이 떨어져요🥵

이럴 땐 Tailwind와 함께 clsx 또는 classnames 라이브러리를 활용하거나, 컴포넌트 단위로 분리해서 관리하는 방법도 있어요.

npm install clsx

import clsx from 'clsx';

const buttonClass = clsx(
  'bg-blue-500',
  'text-white',
  'font-bold',
  'py-2',
  'px-4',
  'rounded',
  { 'opacity-50': isDisabled }
);

 

 

 

---

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!