실무에 바로 적용 가능한 TailwindCSS 튜토리얼

프로젝트 초기 세팅부터 컴포넌트화, 플러그인 활용, 최적화까지 단계별로 배워보세요.

1. 프로젝트에 TailwindCSS 도입하기

CDN 방식 (빠른 시범 적용)

<script src="https://cdn.tailwindcss.com"></script>

위 스크립트 태그를 추가하면 별도 빌드 과정 없이 최신 TailwindCSS를 즉시 사용할 수 있습니다. 프로토타입이나 학습용 프로젝트에 적합합니다.

NPM 방식 (실무 프로젝트 추천)

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

PostCSS 및 Autoprefixer 함께 설치하여, 코드 최적화와 벤더 프리픽스 자동 삽입을 지원합니다. `init -p` 명령으로 Tailwind와 PostCSS 설정 파일을 한번에 생성합니다.

tailwind.config.js 예시:

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

`content`에 빌드 대상 파일 경로를 지정하여, 사용되지 않는 CSS를 제거(Purge)합니다. `extend`를 통해 프로젝트별 테마 확장을 정의할 수 있습니다.

src/index.css에 추가:

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

Tailwind의 베이스 스타일, 컴포넌트, 유틸리티를 순서대로 불러오는 지시문입니다. 이 파일이 최종 CSS의 입력 소스가 됩니다.

빌드 스크립트 예시:

"build:css": "tailwindcss -i ./src/index.css -o ./dist/styles.css --minify"

`-i`로 입력 파일, `-o`로 출력 파일을 지정하고 `--minify` 옵션으로 번들 크기를 최소화합니다. CI/CD 파이프라인에 통합하기 좋습니다.

🔗 TailwindCSS 공식 설치 가이드

2. 공통 스타일 라이브러리 구성

/* src/styles/common.css */
@layer base {
  body { @apply bg-gray-50 text-gray-900 font-sans; }
  a    { @apply text-blue-600 hover:text-blue-800; }
}
@layer components {
  .btn  { @apply inline-block font-medium py-2 px-4 rounded; }
  .card { @apply bg-white shadow-md rounded-lg p-6; }
}

`@layer base`와 `@layer components`로 스타일 계층을 구분해 유지보수를 쉽게 합니다. 재사용 가능한 `.btn`, `.card` 클래스를 정의해 프로젝트 전반에 일관된 UI를 제공합니다.

3. 유틸리티 클래스 활용 법

반응형 네비게이션 바 예제:

<nav class="bg-white shadow-md">
  <div class="container mx-auto flex justify-between items-center p-4">
    <a href="#" class="text-xl font-bold">Brand</a>
    <ul class="hidden md:flex space-x-6">
      <li><a href="#" class="hover:text-blue-600">Home</a></li>
      <li><a href="#" class="hover:text-blue-600">About</a></li>
      <li><a href="#" class="hover:text-blue-600">Projects</a></li>
    </ul>
    <button class="md:hidden btn bg-blue-500 text-white">Menu</button>
  </div>
</nav>

`container mx-auto`로 중앙 정렬된 고정 폭 레이아웃, `hidden md:flex`로 모바일에서 메뉴 숨김/데스크탑에서 표시, `btn` 클래스 재사용으로 일관된 버튼 스타일을 적용합니다.

4. 컴포넌트화 및 재사용 전략

/* src/styles/components.css */
@layer components {
  .btn-primary {
    @apply btn bg-green-500 text-white hover:bg-green-600;
  }
  .card-highlight {
    @apply card border-l-4 border-blue-500;
  }
}

`@apply`로 기존 `.btn`, `.card` 유틸리티를 조합해 `.btn-primary`, `.card-highlight` 같은 시맨틱 컴포넌트를 정의합니다.

사용 예시:

<button class="btn-primary">저장하기</button>
<div class="card-highlight">
  <h3 class="text-xl font-semibold">공지사항</h3>
  <p class="mt-2">새로운 업데이트가 배포되었습니다.</p>
</div>

시맨틱 클래스 사용으로 HTML이 더 읽기 쉬워지고, 팀 간 스타일 가이드 준수가 쉬워집니다.

5. 테마 커스터마이징

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary:   "#1E40AF",
        secondary: "#F59E0B",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

프로젝트 디자인 시스템에 맞는 시맨틱 컬러와 커스텀 폰트를 `tailwind.config.js`에서 글로벌하게 확장합니다.

6. 생산성 향상을 위한 플러그인 활용

설치:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

공식 Tailwind 플러그인으로 폼 스타일, 타이포그래피, 비율 박스를 추가 작업 없이 간편하게 적용할 수 있습니다.

tailwind.config.js:

plugins: [
  require("@tailwindcss/forms"),
  require("@tailwindcss/typography"),
  require("@tailwindcss/aspect-ratio"),
];

`plugins` 배열에 등록만 하면, 각 기능별 유틸리티가 자동으로 활성화됩니다.

7. 빌드 최적화 팁

• PurgeCSS 자동 제거: content 경로를 정확히 지정해 사용하지 않는 CSS를 빌드에서 제외
• JIT 모드 사용: 기본값으로 빠른 빌드와 작은 번들을 제공
• minify 옵션 활성화: --minify 플래그로 코드 용량 감소

이 세 가지 설정으로 배포용 CSS 크기를 최소화하고 빌드 속도를 최적화할 수 있습니다.

다음 글에서는 디자이너를위한 TailwindCSS 활용 튜토리얼을 다룰 예정입니다.