Tailwind CSS로 빠른 UI 개발하기

CSS를 작성하는 방식에는 여러 철학이 있지만, 최근 몇 년간 Tailwind CSS는 가장 빠르게 성장한 방식 중 하나로 자리잡았습니다. "HTML에 클래스를 너무 많이 쓰는 거 아닌가?"라는 초기 거부감을 넘어서면, 놀라운 개발 속도와 일관된 디자인 시스템을 경험할 수 있습니다. 이 글에서는 Tailwind의 핵심 개념부터 실전 패턴까지 단계별로 살펴봅니다.

유틸리티 우선이란 무엇인가

전통적인 CSS 방식은 컴포넌트별 클래스를 만들고 스타일을 별도 파일에 정의합니다. Tailwind는 반대로, 각각의 CSS 속성을 담당하는 작은 클래스들을 조합해서 스타일을 만듭니다.

<!-- 전통적 BEM 방식 -->
<button class="btn btn--primary btn--lg">저장</button>

<!-- Tailwind 유틸리티 방식 -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold
               px-6 py-3 rounded-lg transition-colors cursor-pointer">
  저장
</button>

처음엔 클래스가 많아 보이지만, CSS 파일을 따로 열어볼 필요 없이 HTML만 보면 스타일을 즉시 파악할 수 있습니다. 또한 사용된 클래스만 최종 CSS에 포함되므로 프로덕션 번들은 수 KB에 불과합니다.

설치 및 기본 설정

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

# tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

핵심 유틸리티 클래스

Tailwind의 클래스명은 CSS 속성을 직관적으로 표현합니다. 자주 쓰는 패턴을 익히면 나머지는 공식 문서를 검색해서 바로 쓸 수 있습니다.

<!-- 레이아웃 (Flexbox) -->
<div class="flex items-center justify-between gap-4">
  <span>왼쪽</span>
  <span>오른쪽</span>
</div>

<!-- 레이아웃 (Grid) -->
<div class="grid grid-cols-3 gap-6">
  <div class="col-span-2">메인 콘텐츠</div>
  <div>사이드바</div>
</div>

<!-- 타이포그래피 -->
<h1 class="text-3xl font-bold tracking-tight text-gray-900">제목</h1>
<p class="text-base text-gray-600 leading-relaxed">본문</p>

<!-- 간격 (Spacing: m=margin, p=padding, t/r/b/l/x/y) -->
<div class="mt-8 px-4 py-6 mb-2">...</div>

<!-- 테두리와 그림자 -->
<div class="border border-gray-200 rounded-xl shadow-md p-6">카드</div>

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

Tailwind의 반응형은 클래스 앞에 브레이크포인트 접두사를 붙이는 방식입니다. 접두사 없는 클래스는 모든 크기에 적용되고, 접두사가 있으면 해당 크기 이상에서 적용됩니다.

<!-- 기본(모바일): 1열 / md(768px~): 2열 / lg(1024px~): 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  ...
</div>

<!-- 텍스트 크기도 반응형으로 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  반응형 제목
</h1>

<!-- 모바일에서만 숨기기 -->
<nav class="hidden md:block">데스크톱 네비게이션</nav>
<button class="md:hidden">모바일 햄버거 버튼</button>

다크모드

tailwind.config.js에서 darkMode: 'class'를 설정하면 dark: 접두사로 다크모드 스타일을 지정할 수 있습니다.

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 'media'로 바꾸면 OS 설정 따라감
  // ...
};

<!-- html 또는 body에 'dark' 클래스 토글 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="text-2xl font-bold">제목</h1>
  <p class="text-gray-600 dark:text-gray-400">본문</p>
  <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400
                 text-white px-4 py-2 rounded">
    버튼
  </button>
</div>

<script>
  // 다크모드 토글
  document.querySelector('#toggle').addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

@apply — 반복 클래스 추상화

같은 클래스 조합을 여러 곳에 반복한다면 @apply로 컴포넌트 클래스를 만들 수 있습니다. 단, 남용하면 Tailwind의 장점이 사라지므로 적절히 사용하세요.

/* src/index.css */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg
           font-medium transition-colors focus:outline-none focus:ring-2
           focus:ring-offset-2 cursor-pointer;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300
           hover:bg-gray-50 focus:ring-gray-400;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200
           dark:border-gray-700 shadow-sm p-6;
  }
}

커스텀 디자인 토큰

tailwind.config.js의 theme.extend에서 브랜드 색상, 폰트, 간격을 추가해 일관된 디자인 시스템을 만들 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Pretendard Variable', 'system-ui', 'sans-serif'],
      },
      spacing: {
        18: '4.5rem',
        88: '22rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
};

실전 카드 컴포넌트

앞서 배운 내용을 종합해 블로그 카드 컴포넌트를 만들어봅니다.

<article class="group bg-white dark:bg-gray-800 rounded-2xl border border-gray-200
                dark:border-gray-700 overflow-hidden shadow-sm hover:shadow-lg
                transition-shadow duration-300">
  <div class="aspect-video overflow-hidden">
    <img
      src="/post-image.jpg"
      alt="포스트 썸네일"
      class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
    />
  </div>
  <div class="p-6">
    <div class="flex gap-2 mb-3">
      <span class="text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-700
                   dark:text-blue-300 px-2.5 py-1 rounded-full">CSS</span>
    </div>
    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2
               group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
      카드 제목
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-2">
      카드 설명이 들어갑니다. 두 줄로 자동 clamp됩니다.
    </p>
    <div class="flex items-center justify-between mt-4 pt-4 border-t
                border-gray-100 dark:border-gray-700">
      <span class="text-xs text-gray-500">2026. 04. 09</span>
      <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700">
        자세히 보기 →
      </a>
    </div>
  </div>
</article>