Vite 프로젝트에서 Tailwind v4 설치 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 및 Vite 프로젝트를 사용하는 개발자
난이도: 중간 (Node.js, npm, Vite 구성 기초 지식 필요)
핵심 요약
- Node.js 및 NPM 업데이트가 필수적 (명령어:
node -v,npm -v,npm install -g npm) - Tailwind 설치는
npm install tailwindcss @tailwindcss/vite명령어 사용 - Vite 구성 파일(
vite.config.ts)에 플러그인 등록이 Tailwind v4 설치 핵심 단계 - Tailwind v4에서
tailwind.config.js파일이 제거되고vite.config.ts에서 설정이 변경됨
섹션별 세부 요약
1. Node.js 및 NPM 업데이트
- 현재 Node.js 버전 확인:
node -v명령어 사용 - NPM 업데이트:
npm install -g npm명령어 사용 - 오래된 버전이 설치 문제의 원인이 될 수 있음
2. Tailwind 설치 및 의존성 추가
- Tailwind v4 설치:
npm install tailwindcss @tailwindcss/vite명령어 사용 @tailwindcss/vite패키지는 Vite와 Tailwind의 통합을 위한 필수 모듈
3. Vite 구성 파일(`vite.config.ts`) 설정
- 기존
tailwind.config.js대신vite.config.ts파일에서 설정 - 플러그인 등록 코드:
```ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
```
- 이 설정이 설치 성공 여부 결정 요소
4. 설치 후 결과 및 추가 고려사항
- 설치 성공 후 Tailwind 스타일링 적용 가능
- Tailwind v4에서
tailwind.config.js파일이 제거됨 - 향후 기사에서
tailwind.config.js대체 방법 설명 예정
결론
- Node.js, NPM, Vite 업데이트는 필수이며,
vite.config.ts에@tailwindcss/vite플러그인 등록이 핵심 - Tailwind v4에서
tailwind.config.js파일이 사라졌으므로, 기존 설정은vite.config.ts로 이전 필요 - 설치 과정에서 오류 발생 시, Node.js 버전 및 패키지 버전을 확인하고 업데이트 후 재시도 권장