본문으로 건너뛰기

Tailwind CSS 바이블

목차​

  1. Tailwind CSS 소개
  2. 설치 및 설정
  3. 핵심 개념
  4. 레이아웃
  5. 타이포그래피
  6. 색상 시스템
  7. 스페이싱
  8. 반응형 디자인
  9. 상태 변형
  10. 컴포넌트 예제
  11. 실습 프로젝트
  12. 베스트 프랙티스

Tailwind CSS 소개​

Tailwind CSS란?​

Tailwind CSS는 유틸리티 우선(Utility-First) CSS 프레임워크입니다. 미리 정의된 클래스들을 조합하여 빠르게 커스텀 디자인을 만들 수 있습니다.

기존 CSS vs Tailwind CSS​

/* 기존 CSS */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}
<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded border-0">버튼</button>

장점​

  • 빠른 개발: 미리 정의된 유틸리티 클래스 사용
  • 일관성: 디자인 시스템이 내장됨
  • 반응형: 간단한 클래스로 반응형 디자인 구현
  • 커스터마이징: 설정 파일을 통한 쉬운 커스터마이징
  • 작은 번들 크기: 사용하지 않는 CSS 자동 제거

설치 및 설정​

1. npm을 통한 설치​

# 새 프로젝트 생성
npm init -y

# Tailwind CSS 설치
npm install -D tailwindcss
npx tailwindcss init

2. 설정 파일 (tailwind.config.js)​

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. CSS 파일 설정​

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

4. 빌드 명령어​

# CSS 빌드
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

5. HTML에서 사용​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello Tailwind!</h1>
  </body>
</html>

핵심 개념​

유틸리티 클래스​

각 클래스는 하나의 CSS 속성을 담당합니다.

<!-- 텍스트 색상 -->
<p class="text-red-500">빨간 텍스트</p>

<!-- 배경색 -->
<div class="bg-blue-100">파란 배경</div>

<!-- 패딩 -->
<div class="p-4">패딩 4</div>

<!-- 마진 -->
<div class="m-2">마진 2</div>

크기 시스템​

Tailwind는 일관된 크기 시스템을 사용합니다.

0.25rem = 1 (4px)
0.5rem  = 2 (8px)
0.75rem = 3 (12px)
1rem    = 4 (16px)
1.25rem = 5 (20px)
1.5rem  = 6 (24px)

레이아웃​

Flexbox​

<!-- 기본 플렉스 컨테이너 -->
<div class="flex">
  <div>항목 1</div>
  <div>항목 2</div>
  <div>항목 3</div>
</div>

<!-- 중앙 정렬 -->
<div class="flex items-center justify-center h-screen">
  <div>중앙 정렬된 내용</div>
</div>

<!-- 플렉스 방향 -->
<div class="flex flex-col">세로 배치</div>
<div class="flex flex-row">가로 배치</div>

<!-- 플렉스 랩 -->
<div class="flex flex-wrap">여러 줄 허용</div>

<!-- 간격 -->
<div class="flex space-x-4">가로 간격</div>
<div class="flex flex-col space-y-4">세로 간격</div>

Grid​

<!-- 기본 그리드 -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 반응형 그리드 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>반응형 그리드</div>
</div>

<!-- 자동 피팅 -->
<div class="grid grid-cols-auto-fit gap-4">
  <div>자동 크기</div>
</div>

위치 지정​

<!-- 상대 위치 -->
<div class="relative">
  <div class="absolute top-0 right-0">절대 위치</div>
</div>

<!-- 고정 위치 -->
<div class="fixed top-4 left-4">고정 위치</div>

<!-- 스티키 -->
<div class="sticky top-0">스티키 헤더</div>

타이포그래피​

폰트 크기​

<p class="text-xs">매우 작은 텍스트</p>
<p class="text-sm">작은 텍스트</p>
<p class="text-base">기본 텍스트</p>
<p class="text-lg">큰 텍스트</p>
<p class="text-xl">매우 큰 텍스트</p>
<p class="text-2xl">2XL 텍스트</p>
<p class="text-6xl">6XL 텍스트</p>

폰트 굵기​

<p class="font-thin">얇은 폰트</p>
<p class="font-normal">보통 폰트</p>
<p class="font-medium">중간 폰트</p>
<p class="font-semibold">세미볼드</p>
<p class="font-bold">볼드</p>
<p class="font-black">매우 굵은 폰트</p>

텍스트 정렬​

<p class="text-left">왼쪽 정렬</p>
<p class="text-center">중앙 정렬</p>
<p class="text-right">오른쪽 정렬</p>
<p class="text-justify">양쪽 정렬</p>

텍스트 장식​

<p class="underline">밑줄</p>
<p class="overline">윗줄</p>
<p class="line-through">취소선</p>
<p class="no-underline">밑줄 제거</p>

색상 시스템​

기본 색상​

<!-- 그레이 -->
<div class="bg-gray-100">연한 그레이</div>
<div class="bg-gray-500">중간 그레이</div>
<div class="bg-gray-900">진한 그레이</div>

<!-- 컬러 -->
<div class="bg-red-500">빨강</div>
<div class="bg-blue-500">파랑</div>
<div class="bg-green-500">초록</div>
<div class="bg-yellow-500">노랑</div>
<div class="bg-purple-500">보라</div>

색상 농도​

<!-- 50 (가장 연함) ~ 950 (가장 진함) -->
<div class="bg-blue-50">매우 연한 파랑</div>
<div class="bg-blue-100">연한 파랑</div>
<div class="bg-blue-500">기본 파랑</div>
<div class="bg-blue-900">진한 파랑</div>
<div class="bg-blue-950">매우 진한 파랑</div>

텍스트 색상​

<p class="text-red-500">빨간 텍스트</p>
<p class="text-blue-600">파란 텍스트</p>
<p class="text-green-700">초록 텍스트</p>

스페이싱​

패딩 (Padding)​

<!-- 모든 방향 -->
<div class="p-4">모든 방향 패딩</div>

<!-- 가로/세로 -->
<div class="px-4">가로 패딩</div>
<div class="py-2">세로 패딩</div>

<!-- 개별 방향 -->
<div class="pt-4">위 패딩</div>
<div class="pr-4">오른쪽 패딩</div>
<div class="pb-4">아래 패딩</div>
<div class="pl-4">왼쪽 패딩</div>

마진 (Margin)​

<!-- 모든 방향 -->
<div class="m-4">모든 방향 마진</div>

<!-- 가로/세로 -->
<div class="mx-auto">가로 중앙 정렬</div>
<div class="my-4">세로 마진</div>

<!-- 개별 방향 -->
<div class="mt-4">위 마진</div>
<div class="mr-4">오른쪽 마진</div>
<div class="mb-4">아래 마진</div>
<div class="ml-4">왼쪽 마진</div>

<!-- 음수 마진 -->
<div class="-mt-4">음수 위 마진</div>

반응형 디자인​

브레이크포인트​

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

반응형 클래스​

<!-- 기본: 세로 배치, md 이상: 가로 배치 -->
<div class="flex flex-col md:flex-row">
  <div>항목 1</div>
  <div>항목 2</div>
</div>

<!-- 반응형 그리드 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>반응형 그리드</div>
</div>

<!-- 반응형 텍스트 크기 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">반응형 제목</h1>

<!-- 반응형 숨김/표시 -->
<div class="hidden md:block">데스크톱에서만 표시</div>
<div class="block md:hidden">모바일에서만 표시</div>

상태 변형​

호버 효과​

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">호버 버튼</button>

<div class="bg-gray-100 hover:bg-gray-200 p-4 rounded">호버 카드</div>

포커스 효과​

<input
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-3 py-2 rounded"
  placeholder="포커스 입력 필드"
/>

<button
  class="bg-blue-500 focus:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 text-white px-4 py-2 rounded"
>
  포커스 버튼
</button>

활성 상태​

<button class="bg-blue-500 active:bg-blue-800 text-white px-4 py-2 rounded">클릭 버튼</button>

비활성화 상태​

<button
  class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
  disabled
>
  비활성화 버튼
</button>

컴포넌트 예제​

카드 컴포넌트​

<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="카드 이미지" />
  <div class="p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-2">카드 제목</h2>
    <p class="text-gray-600 mb-4">카드 설명 텍스트입니다.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      자세히 보기
    </button>
  </div>
</div>

네비게이션 바​

<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <div class="text-xl font-bold text-gray-800">로고</div>
      </div>
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600">홈</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">소개</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">서비스</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">연락처</a>
      </div>
      <div class="md:hidden flex items-center">
        <button class="text-gray-700">☰</button>
      </div>
    </div>
  </div>
</nav>

폼 컴포넌트​

<form class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="email"> 이메일 </label>
    <input
      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
      id="email"
      type="email"
      placeholder="이메일을 입력하세요"
    />
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="password"> 비밀번호 </label>
    <input
      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
      id="password"
      type="password"
      placeholder="비밀번호를 입력하세요"
    />
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      로그인
    </button>
    <a
      class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
      href="#"
    >
      비밀번호 찾기
    </a>
  </div>
</form>

실습 프로젝트​

프로젝트 1: 랜딩 페이지​

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind 랜딩 페이지</title>
    <link href="./dist/output.css" rel="stylesheet" />
  </head>
  <body class="bg-gray-50">
    <!-- 헤더 -->
    <header class="bg-white shadow-sm">
      <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <div class="text-2xl font-bold text-blue-600">MyApp</div>
          <div class="space-x-6">
            <a href="#" class="text-gray-600 hover:text-blue-600">기능</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">가격</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">연락처</a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              시작하기
            </button>
          </div>
        </div>
      </nav>
    </header>

    <!-- 히어로 섹션 -->
    <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="max-w-7xl mx-auto px-4 text-center">
        <h1 class="text-5xl font-bold mb-6">혁신적인 솔루션으로 비즈니스를 성장시키세요</h1>
        <p class="text-xl mb-8">간단하고 효과적인 도구로 생산성을 향상시키세요</p>
        <button
          class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transform hover:scale-105 transition-all"
        >
          무료로 시작하기
        </button>
      </div>
    </section>

    <!-- 기능 섹션 -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">주요 기능</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="text-center p-6 bg-white rounded-lg shadow-md">
            <div
              class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"
            >
              <span class="text-blue-600 text-2xl">⚡</span>
            </div>
            <h3 class="text-xl font-semibold mb-2">빠른 성능</h3>
            <p class="text-gray-600">최적화된 알고리즘으로 빠른 처리 속도를 제공합니다.</p>
          </div>
          <div class="text-center p-6 bg-white rounded-lg shadow-md">
            <div
              class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"
            >
              <span class="text-green-600 text-2xl">🔒</span>
            </div>
            <h3 class="text-xl font-semibold mb-2">안전한 보안</h3>
            <p class="text-gray-600">엔터프라이즈급 보안으로 데이터를 안전하게 보호합니다.</p>
          </div>
          <div class="text-center p-6 bg-white rounded-lg shadow-md">
            <div
              class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"
            >
              <span class="text-purple-600 text-2xl">📊</span>
            </div>
            <h3 class="text-xl font-semibold mb-2">실시간 분석</h3>
            <p class="text-gray-600">실시간 데이터 분석으로 인사이트를 제공합니다.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 푸터 -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="max-w-7xl mx-auto px-4 text-center">
        <p>&copy; 2025 MyApp. 모든 권리 보유.</p>
      </div>
    </footer>
  </body>
</html>

베스트 프랙티스​

1. 클래스 정리​

<!-- 좋은 예: 논리적 그룹화 -->
<div
  class="
  flex items-center justify-between 
  px-4 py-2 
  bg-white border border-gray-200 rounded-lg 
  hover:bg-gray-50 
  focus:outline-none focus:ring-2 focus:ring-blue-500
"
></div>

2. 컴포넌트 재사용을 위한 CSS 클래스​

/* input.css */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

3. 설정 파일 커스터마이징​

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Noto Sans KR', 'sans-serif'],
      },
      spacing: {
        18: '4.5rem',
        88: '22rem',
      },
    },
  },
  plugins: [],
};

4. 유용한 패턴들​

<!-- 중앙 정렬 컨테이너 -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- 숨김/표시 토글 -->
  <div class="hidden lg:block">데스크톱만</div>
  <div class="lg:hidden">모바일만</div>

  <!-- 아바타 -->
  <img class="w-10 h-10 rounded-full object-cover" src="avatar.jpg" />

  <!-- 배지 -->
  <span
    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
  >
    NEW
  </span>

  <!-- 그라데이션 -->
  <div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
    <!-- 그림자 -->
    <div class="shadow-sm">작은 그림자</div>
    <div class="shadow-lg">큰 그림자</div>
    <div class="shadow-xl">매우 큰 그림자</div>
  </div>
</div>

5. 디버깅 팁​

<!-- 레이아웃 디버깅을 위한 임시 클래스 -->
<div class="border-2 border-red-500">레이아웃 확인</div>

<!-- 크기 확인 -->
<div class="bg-red-200">크기 확인</div>

추가 학습 자료​

공식 문서​

연습 사이트​

추천 플러그인​

# 폼 스타일링
npm install @tailwindcss/forms

# 타이포그래피
npm install @tailwindcss/typography

# 애스펙트 비율
npm install @tailwindcss/aspect-ratio

이 가이드를 통해 Tailwind CSS의 기초부터 실전 활용까지 단계별로 학습하실 수 있습니다. 실습을 통해 익숙해지시면 더욱 효과적으로 활용하실 수 있을 것입니다!