Tailwind CSS 설정 및 초기화

18.1.1. 의존성 설치

프로젝트에 Tailwind CSS v3를 도입하려면 다음 패키지를 설치해야 합니다.

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p --ts

package.json의 devDependencies에 다음 항목이 포함되어야 합니다.

{
  "devDependencies": {
    "tailwindcss": "^3.4.0",
    "postcss": "^8.4.0",
    "autoprefixer": "^10.4.0"
  }
}

• tailwindcss는 반드시 3.x 버전을 사용해야 합니다.
• postcss와 autoprefixer는 Tailwind CSS의 필수 동반 의존성입니다.
• --ts 플래그를 사용하여 TypeScript 기반 설정 파일을 생성합니다.

---

18.1.2. tailwind.config.ts

tailwind.config.ts 파일은 프로젝트 루트에 위치해야 합니다.

import type { Config } from 'tailwindcss'

export default {
  content: [
    './index.html',
    './src/**/*.{vue,ts,tsx,js,jsx}',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          100: '#e0ebff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Pretendard', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      spacing: {
        '4.5': '1.125rem',
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
} satisfies Config

항목	설정 원칙
content	Vue 파일과 TypeScript 파일을 모두 포함해야 합니다
theme.extend	기본 테마를 유지하면서 프로젝트 고유 값을 확장합니다
theme 직접 수정	기본 값을 덮어쓰므로 사용하지 않습니다
plugins	서드파티 플러그인은 팀 합의 후 추가합니다

---

18.1.3. PostCSS 설정

postcss.config.js 파일을 프로젝트 루트에 생성합니다.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• tailwindcss 플러그인이 반드시 autoprefixer보다 먼저 등록되어야 합니다.
• 추가 PostCSS 플러그인은 autoprefixer 이후에 배치합니다.
• Vite는 PostCSS 설정을 자동으로 인식하므로 별도 연동 작업이 필요하지 않습니다.

---

18.1.4. 글로벌 CSS 구성

src/styles/main.css 파일에 Tailwind 지시어를 선언합니다.

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

@layer를 사용하여 커스텀 스타일의 우선순위를 제어합니다.

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

@layer base {
  html {
    @apply text-gray-900 bg-white antialiased;
  }
  body {
    @apply min-h-screen;
  }
}

@layer components {
  .btn-base {
    @apply inline-flex items-center justify-center rounded-md font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

• @layer base는 HTML 요소의 기본 스타일 리셋에 사용합니다.
• @layer components는 재사용 컴포넌트 클래스를 정의할 때 사용합니다.
• @layer utilities는 Tailwind에 없는 커스텀 유틸리티를 추가할 때 사용합니다.
• main.css는 src/main.ts에서 최상위로 임포트해야 합니다.

// src/main.ts
import './styles/main.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')