CVA와 Shadcn UI를 설치한다.

[4BFC]

🔗유요한 TailwindCSS만들기

• CVA

    pnpm install class-variance-authority
  

• Shadcn UI

    pnpm dlx shadcn-ui@latest init
    
    pnpm dlx shadcn-ui add button
  

• windwo 환경 문제로 cache를 지우고 아래 명령어로 실행

    pnpm store prune
  

    pnpm add -D shadcn-ui
    
    pnpm exec shadcn-ui init
  

• 위 방법이 안될 경우 대체 방법은 다음과 같다.

    npx shadcn-ui@latest init
  

참고로 shadcn ui는 컴포넌트 라이브러리가 아니기 떄문에 일반적인 npm이나 yarn으로 설치할 수 없다.

• 위 방법이 모두 안된다면 Shadcn UI GitHub repo를 직접 사용하는 방법 밖에 없다.
  • 따라서 다음과 같이 tailwind.conifg를 설정해야한다.

      module.exports = {
        content: [
          "./src/**/*.{js,jsx,ts,tsx}",
          "./src/components/**/*.{js,jsx,ts,tsx}",
        ],
      };
    

물론 global로 설치하는 방법이 있지만 이는 실행하지 않았다. 이유는 아래와 같다.

• 하지만 Shadcn ui는 MUI와 같이 직접적인 UI 공유이기 때문에 필요성에 모호함을 느끼고 있다. 자율성을 추구하는 디자이너들 입장에선 정해져있는 UI들을 재활용한다면 관연 디자인이란 정체성과 앞으로 작업, 브렌딩을 함에 있어서 좋은 결과를 만들어 낼 수 있는가? 이는 디자이너와 소통을 통해 해결해야하는 부분이라고 생각한다. 단, Shadcn ui Dcomunet를 보면 Figma 디자인을 지원한다.

각 설치한 툴과 라이브러리의 차이점

특징	Tailwind CSS	Shadcn UI	CVA
역할	유틸리티 클래스로 스타일 정의	Tailwind 기반의 UI 컴포넌트 제공	Tailwind 클래스 조합 및 변형 관리 도구
직접적인 UI 제공	❌ 직접 구현해야 함	✅ 프로덕션 레디 컴포넌트 제공	❌ UI 제공 없음, Tailwind 관리 도구
커스터마이징	완전히 자유로움	Tailwind를 활용한 커스터마이징 가능	Tailwind 클래스를 기반으로 상태 관리
사용 목적	CSS 작성 단순화	빠르고 일관된 UI 구성	복잡한 클래스 조합 및 상태 관리 간소화
대상 사용자	CSS를 직접 다루려는 개발자	빠르게 UI를 구축하려는 개발자	Tailwind로 UI 상태를 동적으로 관리하려는 개발자

Error Code

    ~\trendgarage\front>pnpm list shadcn-ui
    Legend: production dependency, optional only, dev only
    
    front@0.1.0 D:\myclass\0_Programming-content\trendgarage\front (PRIVATE)
    devDependencies:
    shadcn-ui 0.9.3
    
    D:\myclass\0_Programming-content\trendgarage\front>pnpm exec shadcn-ui init
    'shadcn-ui' is not recognized as an internal or external command,
    operable program or batch file.
       ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "shadcn-ui" not found

---

위의 경험으로 더 나은 환경 만들기(ref 참조)

  npm install --save clsx
  npm install tailwind-merge
  npm install class-variance-authority