Tailwind CSS or ShadCN UI 가이드

1. Tailwind CSS란?

Tailwind CSS는 Utility-first 접근 방식을 기반으로 한 CSS 프레임워크입니다.
일반적인 CSS 프레임워크(예: Bootstrap)가 미리 정의된 컴포넌트를 제공하는 것과 달리, Tailwind는 작은 단위의 클래스를 조합해 원하는 UI를 직접 만들어 나가는 방식입니다.

Tailwind의 특징

• Utility-first: bg-blue-500, text-center, p-4 같은 작은 단위의 클래스를 조합.
• 빠른 프로토타이핑: 별도의 CSS 파일 없이 바로 클래스 조합으로 디자인 가능.
• 높은 커스터마이징: tailwind.config.js에서 색상, 폰트, spacing 단위를 직접 설정.
• 반응형 대응이 쉬움: sm:, md:, lg: 같은 접두어로 반응형 스타일 지정.

예시 코드

<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

➡️ 불필요한 CSS 작성 없이도 클래스 조합으로 깔끔한 버튼을 만들 수 있습니다.

---

2. ShadCN UI란?

ShadCN UI는 Tailwind CSS를 기반으로 한 컴포넌트 라이브러리입니다.
Next.js와 함께 자주 쓰이며, Radix UI와 같은 접근성 라이브러리를 내부적으로 활용합니다. 단순히 UI 키트를 제공하는 것이 아니라 컴포넌트 코드를 직접 복사하여 내 프로젝트 안에서 관리하는 방식이 특징입니다.

ShadCN UI의 특징

• Tailwind 기반: 스타일은 Tailwind로 처리.
• Radix UI 활용: 접근성이 보장된 UI 컴포넌트 제공.
• 직접 관리 방식: npm으로 설치하는 게 아니라, 컴포넌트 코드를 프로젝트에 포함시켜 사용.
• 디자인 일관성: 다크 모드, 컬러 토큰 등 디자인 시스템이 잘 정리되어 있음.

예시 코드 (ShadCN UI 버튼)

import { Button } from "@/components/ui/button"

export default function Example() {
  return <Button variant="destructive">Delete</Button>
}

➡️ 단순히 <Button> 태그만으로도 일관된 디자인과 상태(hover, focus, disabled 등)를 제공받을 수 있습니다.

---

3. Tailwind vs ShadCN UI 비교

구분 Tailwind CSS ShadCN UI

성격	CSS 프레임워크	컴포넌트 라이브러리
사용 방식	클래스 조합	컴포넌트 호출
자유도	매우 높음	중간 (제공된 디자인 패턴 안에서 조정)
러닝 커브	처음엔 다소 헷갈리지만 빠르게 적응 가능	Tailwind 지식이 있으면 쉽게 사용 가능
커스터마이징	config.js에서 무한 확장 가능	컴포넌트 코드 직접 수정 가능
사용 예시	완전히 커스텀 디자인이 필요할 때	빠르게 통일감 있는 UI를 구축할 때

---

4. 언제 무엇을 선택해야 할까?

• Tailwind CSS만 사용하는 경우
  • 완전히 커스텀된 UI가 필요할 때
  • 디자이너와 협업하며 픽셀 단위까지 조정이 필요한 프로젝트
  • 디자인 시스템을 직접 정의하고 싶을 때
• ShadCN UI를 사용하는 경우
  • 빠르게 프로젝트를 시작해야 할 때
  • 버튼, 모달, 드롭다운 같은 공통 컴포넌트가 이미 필요할 때
  • 일관된 UI를 유지하면서도 필요할 경우 수정할 수 있는 유연성이 필요할 때

➡️ 결론적으로 Tailwind는 “디자인 도구”, **ShadCN은 “디자인 시스템의 구현체”**라고 이해하면 쉽습니다.

---

5. 함께 쓰면 더 강력하다

실제로 많은 개발자들이 Tailwind와 ShadCN UI를 함께 사용합니다.
ShadCN의 기본 컴포넌트를 활용하면서, 필요에 따라 Tailwind 유틸리티 클래스를 추가해 세부적인 스타일을 조정하는 방식입니다.

예시:

import { Button } from "@/components/ui/button"

export default function Example() {
  return (
    <Button className="bg-gradient-to-r from-purple-500 to-pink-500">
      Custom Gradient
    </Button>
  )
}

➡️ 기본 버튼 컴포넌트에 Tailwind 유틸리티를 조합해 디자인 변형이 가능합니다.

---

6. 마무리

Tailwind CSS와 ShadCN UI는 경쟁 관계라기보다는 상호 보완적인 도구입니다.
Tailwind는 “재료”, ShadCN UI는 “조리법”에 가깝습니다. 원하는 UI를 직접 조합해서 만들 수도 있고, 검증된 패턴을 가져다 빠르게 쓸 수도 있습니다.

• Tailwind만 사용 → 자유도 최우선
• ShadCN UI만 사용 → 생산성과 일관성 우선
• 함께 사용 → 가장 효율적

프로젝트의 성격에 맞춰 적절히 선택하거나 병행하면, 더 빠르고 일관된 개발이 가능합니다.