React + TypeScript + Tailwind CSS 프로젝트
설치된 패키지
- React 19
- TypeScript
- Vite (빌드 도구)
- Tailwind CSS v4 (최신 버전, PostCSS 플러그인 방식)
프로젝트 구조
react-tailwind-app/
├── src/
│ ├── App.tsx # 메인 컴포넌트 (Tailwind 클래스 사용 예제)
│ ├── main.tsx # 앱 진입점
│ └── index.css # Tailwind CSS import
├── postcss.config.mjs # PostCSS 설정 (Tailwind 플러그인)
├── package.json
├── tsconfig.json
└── vite.config.ts
설정 내용
1. Tailwind CSS 설치
npm install tailwindcss @tailwindcss/postcss postcss2. PostCSS 설정 (postcss.config.mjs)
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};3. CSS 파일 (src/index.css)
@import "tailwindcss";프로젝트 시작하기
- 압축 해제:
tar -xzf react-tailwind-app.tar.gz
cd react-tailwind-app- 의존성 설치:
npm install- 개발 서버 실행:
npm run dev- 빌드:
npm run build- 빌드된 파일 미리보기:
npm run previewTailwind CSS 사용 예제
App.tsx에 Tailwind CSS 유틸리티 클래스를 사용한 예제가 포함되어 있습니다:
<div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center text-white">
<h1 className="text-5xl font-bold mb-8">Vite + React + Tailwind</h1>
<button className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
Click me
</button>
</div>주요 특징
✅ Vite를 사용한 빠른 개발 환경
✅ TypeScript 완전 지원
✅ Tailwind CSS v4 최신 PostCSS 플러그인 방식 사용
✅ Hot Module Replacement (HMR) 지원
✅ 프로덕션 빌드 최적화