[Shadcn UI] 설치 오류: bunx --bun shadcn@latest init

# 업데이트 (25.03.04 기준)

• Tailwindcss 4.0은 React 19 기준으로 제공됨: 해당 환경을 맞춘 다음 npx shadcn@canary init 통해 초기화 가능 (관련 링크: https://github.com/shadcn-ui/ui/issues/6585)
• 만약 React 18을 기준으로 진행이 필요할 경우에는 아래와 같은 migration 절차 (#진행 방법) 를 거치면 됩니다.

---

# 환경

• React + Bun + Vite + TypeScript

# 현상: Shadcn UI Installation 중 bunx --bun shadcn@latest init 실행 시 오류 발생 (tailwind.config.js 파일이 있었음)

PS C:\olive\app> bunx --bun shadcn@latest init
✔ Preflight checks.
⠋ Verifying framework.
No Tailwind CSS configuration found at C:\olive\app
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

 

# 원인

• Shadcn UI 라이브러리 문서 작성 시 Tailwindcss 라이브러리가 세팅되었던 최신 버전은 3.x 기준 (tailwindcss@latest = 3.x)
• 최근 Tailwindcss 라이브러리의 버전이 3.x -> 4.0으로 업그레이드 되면서 버전 간 충돌 발생
• 따라서 현재 Shadcn UI 공식 홈페이지에서 제공하는 Installation대로 진행하면 안 됨. 아래 내용 그대로 진행하세요.

# 진행 방법

• TailWindCSS v3 버전으로 설치: bun add -D tailwindcss@3.4.0 postcss autoprefixer

bun add v1.2.0 (b0c5a765)

installed tailwindcss@3.4.0 with binaries:
 - tailwind
 - tailwindcss
installed postcss@8.5.1
installed autoprefixer@10.4.20 with binaries:
 - autoprefixer

39 packages installed [3.65s]

• TailWindCSS v3 버전으로 초기화: bunx --bun tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

• Shadcn UI 초기화: bunx --bun shadcn@latest init

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Zinc
√ Would you like to use CSS variables for theming? ... no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src\index.css
✔ Installing dependencies.
  - src\lib\utils.ts

Success! Project initialization completed.
You may now add components.

• Shadcn UI Components 전체 추가: bunx --bun shadcn@latest add --all

✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src\index.css
✔ Installing dependencies.
  - src\components\ui\accordion.tsx
  - src\components\ui\alert-dialog.tsx
  - src\components\ui\aspect-ratio.tsx
  - src\components\ui\avatar.tsx
  - src\components\ui\badge.tsx
  - src\components\ui\breadcrumb.tsx
  - src\components\ui\calendar.tsx
  - src\components\ui\card.tsx
  - src\components\ui\carousel.tsx
  - src\components\ui\chart.tsx
  - src\components\ui\checkbox.tsx
  - src\components\ui\collapsible.tsx
  - src\components\ui\command.tsx
  - src\components\ui\dialog.tsx
  - src\components\ui\context-menu.tsx
  - src\components\ui\drawer.tsx
  - src\components\ui\dropdown-menu.tsx
  - src\components\ui\form.tsx
  - src\components\ui\hover-card.tsx
  - src\components\ui\input-otp.tsx
  - src\components\ui\menubar.tsx
  - src\components\ui\navigation-menu.tsx
  - src\components\ui\pagination.tsx
  - src\components\ui\popover.tsx
  - src\components\ui\progress.tsx
  - src\components\ui\radio-group.tsx
  - src\components\ui\resizable.tsx
  - src\components\ui\scroll-area.tsx
  - src\components\ui\select.tsx
  - src\components\ui\slider.tsx
  - src\components\ui\sonner.tsx
  - src\components\ui\switch.tsx
  - src\components\ui\table.tsx
  - src\components\ui\toast.tsx
  - src\hooks\use-toast.ts
  - src\components\ui\toaster.tsx
  - src\components\ui\toggle.tsx
  - src\components\ui\toggle-group.tsx
  - src\components\ui\alert.tsx
  - src\components\ui\button.tsx
  - src\components\ui\label.tsx
  - src\components\ui\input.tsx
  - src\components\ui\separator.tsx
  - src\components\ui\sheet.tsx
  - src\components\ui\sidebar.tsx
  - src\components\ui\tooltip.tsx
  - src\hooks\use-mobile.tsx
  - src\components\ui\skeleton.tsx
  - src\components\ui\tabs.tsx
  - src\components\ui\textarea.tsx

• TailWindCSS 4.0 Migration:  npx @tailwindcss/upgrade@next
  • 주의: bunx --bun @tailwindcss/upgrade@next 실행할 경우, 아래와 같은 오류가 발생된다 -> 위 명령어를 실행해주면 오류가 더는 발생하지 않는다.
    •   ⚙️  tree-sitter [1/2] error: could not determine executable to run for package exec
    • error: install script from "tree-sitter-typescript" exited with 1

# 참고 (deprecated)

• 이슈 : https://github.com/shadcn-ui/ui/issues/6446 현재 진행 중인 사항이며 (4일 전 업데이트), 위 내용은 언제든지 변경될 수 있음
• React 18 + Tailwind v3, React 19 + Tailwind v4 등 버전별 호환에 문제가 있어 작업 진행중이라는 내용을 확인할 수 있었음(수정할 내용이 많다고도..) 당장 초기 세팅을 진행하시는 경우 참고하시길 바람