Tailwind CSS 실전 활용법 – 클래스 지옥 탈출 가이드

Tailwind CSS를 처음 보면 이런 생각이 듭니다. “클래스가 왜 이렇게 많아?” HTML이 지저분해 보이고, 기존 CSS 방식이 더 깔끔해 보일 수 있습니다.

하지만 제대로 사용하면 Tailwind는 생산성을 크게 높여줍니다. 이 글에서는 CSS를 아는 개발자가 Tailwind를 실무에서 효과적으로 쓰는 방법을 정리합니다.

Tailwind의 핵심 철학

Tailwind는 유틸리티 우선(Utility-First) 접근법입니다.

<!-- 기존 CSS 방식 -->
<button class="primary-button">저장</button>

<!-- Tailwind 방식 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  저장
</button>

언뜻 보면 Tailwind가 더 길어 보입니다. 하지만 장점이 있습니다.

클래스가 너무 길어질 때: 3가지 해결책

Tailwind의 가장 큰 불만은 클래스가 길어진다는 점입니다. 실무에서 쓰는 해결책을 소개합니다.

1. 줄바꿈으로 그룹화하기

클래스를 역할별로 줄바꿈하면 가독성이 좋아집니다.

<button
  class="
    bg-blue-500 text-white
    px-4 py-2 rounded-lg
    hover:bg-blue-600 active:bg-blue-700
    transition-colors duration-200
  "
>
  저장
</button>

그룹화 기준:
– 1줄: 색상 (배경, 텍스트)
– 2줄: 크기/여백
– 3줄: 상태 (hover, active, focus)
– 4줄: 애니메이션

2. @apply로 반복 줄이기

같은 스타일이 여러 곳에서 반복되면 @apply를 씁니다.

/* globals.css */
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded-lg
           hover:bg-blue-600 transition-colors;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg
           hover:bg-gray-300 transition-colors;
  }
}

<button class="btn-primary">저장</button>
<button class="btn-secondary">취소</button>

주의: @apply를 남용하면 Tailwind의 장점이 사라집니다. 정말 자주 반복되는 패턴에만 사용하세요.

3. 컴포넌트로 추출하기 (React/Vue)

프레임워크를 쓴다면 컴포넌트로 만드는 게 가장 좋습니다.

// Button.jsx
function Button({ variant = 'primary', children, ...props }) {
  const styles = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600',
  };

  return (
    <button
      className={`px-4 py-2 rounded-lg transition-colors ${styles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

<Button variant="primary">저장</Button>
<Button variant="danger">삭제</Button>

반응형 디자인: 모바일 우선

Tailwind는 모바일 우선입니다. 기본 스타일이 모바일이고, 큰 화면에서 덮어씁니다.

<div class="
  grid grid-cols-1
  md:grid-cols-2
  lg:grid-cols-3
  gap-4
">
  <!-- 카드들 -->
</div>

팁: 클래스 순서는 작은 화면 → 큰 화면으로 작성하면 읽기 쉽습니다.

커스텀 설정: tailwind.config.js

프로젝트 디자인 시스템에 맞게 설정을 확장할 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      fontFamily: {
        sans: ['Pretendard', 'sans-serif'],
      },
    },
  },
};

이제 bg-brand-500, p-18 같은 클래스를 쓸 수 있습니다.

임의값(Arbitrary Values)은 최소한으로

Tailwind는 [] 문법으로 임의 값을 쓸 수 있습니다.

<div class="w-[137px] mt-[23px]">...</div>

이건 안티패턴입니다. 디자인 시스템이 무너지고, 일관성이 사라집니다. 임의값이 자주 필요하다면 tailwind.config.js에 추가하세요.

다크 모드 적용하기

Tailwind는 다크 모드를 dark: 접두사로 지원합니다.

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  다크 모드 지원 콘텐츠
</div>

설정에서 다크 모드 전환 방식을 선택합니다:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 또는 'media'
};

자주 쓰는 패턴 모음

가운데 정렬 (Flexbox)

<div class="flex items-center justify-center h-screen">
  가운데 정렬된 콘텐츠
</div>

가운데 정렬 (Grid)

<div class="grid place-items-center h-screen">
  가운데 정렬된 콘텐츠
</div>

텍스트 말줄임

<p class="truncate">아주 긴 텍스트가 있으면 말줄임표로...</p>

스크롤 영역

<div class="h-64 overflow-y-auto">
  스크롤 가능한 콘텐츠
</div>

그림자 + 호버 효과

<div class="shadow-md hover:shadow-lg transition-shadow">
  카드 콘텐츠
</div>

정리

Tailwind는 처음엔 어색하지만, 익숙해지면 CSS 작성 속도가 확실히 빨라집니다. 핵심은 클래스를 정리하는 자신만의 규칙을 만드는 것입니다.