🖌️ tailwindCSS 설치 이슈(v3->v4) 및 해결

🩼 기존 tailwindCSS 설치 가이드(블로그)

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

위와 같은 CLI 입력 시 npx tailwindcss init -p에서 다음과 같은 에러 발생.

npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in: /Users/okorion/.npm/_logs/2025-03-22T12_53_06_552Z-debug-0.log

이유는 Tailwind v4에서는 CLI를 정리하면서 init 기능을 제거하고, 구성 파일을 수동 작성하는 방향으로 변경한 것 때문. - Tailwind CSS v4.0

⚒️ 해결 방법

[공식 문서] Installation - Get started with Tailwind CSS

• Tailwind CSS v3 -> v4 변경점

항목	Tailwind CSS v3	Tailwind CSS v4
content 설정	tailwind.config.js에 직접 작성	자동 감지 (zero config)
프리픽서	autoprefixer 필요	내장됨 (Lightning CSS)
설정 방식	JS 기반 config	CSS에서 설정 가능 (@theme 등)
설치 복잡도	여러 개	tailwindcss 하나면 됨 (Vite 쓰면 @tailwindcss/vite 추가)

• 필요 패키지 항목

패키지명	필요 여부	설명
tailwindcss	✅ 필요	핵심 프레임워크
@tailwindcss/vite	✅ Vite 사용자라면 필요	Vite용 공식 Tailwind 플러그인. PostCSS 없이 통합 가능
@tailwindcss/postcss	❌ 불필요 (Vite 사용 시)	Tailwind을 PostCSS로 연결할 때 필요하지만, @tailwindcss/vite 쓰면 필요 없음
autoprefixer	❌ 불필요	Tailwind v4는 내부적으로 Lightning CSS로 자동 처리함
@tailwindcss/cli	❌ 불필요	Vite 쓰는 경우 필요 없음. CLI로 직접 빌드할 때만 사용