Tailwind CSS vs shadcn/ui — 차트·블로그 사이트 기준 비교

핵심 전제: shadcn/ui는 Tailwind CSS를 대체하지 않는다. Tailwind 위에서 동작하는 컴포넌트 레이어다. 비교 대상은 "Tailwind만 쓸 것인가 vs shadcn/ui도 함께 쓸 것인가"다.

1. 개념적 위치

구분	Tailwind CSS	shadcn/ui
종류	Utility-first CSS 프레임워크	컴포넌트 컬렉션 (Radix UI + Tailwind 기반)
역할	스타일 유틸리티 제공	접근성 있는 UI 컴포넌트 제공
설치 방식	npm 패키지 의존성	소스코드를 직접 복사 (의존성 없음)
커스터마이징	클래스 조합으로 자유롭게	복사된 코드를 직접 수정
번들 크기	CSS 유틸리티만 포함	사용한 컴포넌트 JS만 포함

2. 기능 비교

UI 컴포넌트

기능	Tailwind만	Tailwind + shadcn/ui
버튼, 배지, 카드	직접 제작	즉시 사용 가능
모달 / 다이얼로그	직접 제작 (접근성 직접 구현)	Radix 기반 접근성 내장
드롭다운 / 셀렉트	직접 제작	키보드 탐색 자동 지원
폼 / 인풋	직접 스타일링	검증 상태 스타일 포함
테마 (다크모드)	`dark:` 클래스 수동 적용	CSS 변수 기반 자동 전환

차트

항목	Tailwind만	shadcn/ui Chart
기반 라이브러리	Recharts, Chart.js 직접 연결	Recharts 래핑 (shadcn/ui v0.8+)
스타일 통일	테마와 별도 관리	CSS 변수로 사이트 테마와 자동 연동
다크모드	Recharts에 직접 색상 지정	자동 전환
반응형	Recharts `ResponsiveContainer` 직접 설정	기본 제공
툴팁 커스터마이징	컴포넌트 직접 작성	`<ChartTooltip>` 컴포넌트로 간단 처리
지원 차트 유형	Recharts 전체 (무제한)	Bar, Line, Area, Pie, Radar, Radial

블로그 특화 기능

기능	Tailwind만	Tailwind + shadcn/ui
글 목록 카드	직접 제작	`<Card>` 컴포넌트 조합
태그 / 카테고리	직접 제작	`<Badge>` 즉시 활용
목차 (TOC)	직접 제작	`<ScrollArea>` + 직접 구성
코드 블록	prose 클래스 + 직접 스타일	shadcn Typography + 직접 조합
페이지네이션	직접 제작	`<Pagination>` 컴포넌트
검색 UI	직접 제작	`<Command>` (Cmd+K 검색 팔레트 내장)
관리자 사이드바	직접 제작	`<Sidebar>` 컴포넌트 (v0.9+)

3. 개발 속도 vs 자유도

code

Tailwind만 사용          Tailwind + shadcn/ui
─────────────────────    ──────────────────────────
초기 세팅: 빠름          초기 세팅: 약간 더 걸림
컴포넌트 제작: 느림      컴포넌트 제작: 빠름
디자인 자유도: 최대      디자인 자유도: 높음 (코드 소유)
번들 제어: 완전          번들 제어: 사용한 것만 포함
학습 비용: 낮음          학습 비용: Radix API 추가 필요

4. 차트 + 블로그 사이트에 적합한 선택

Tailwind만 고려할 경우

완전히 독자적인 디자인 시스템을 구축할 때
기존에 만들어둔 컴포넌트 라이브러리가 있을 때
번들 크기를 극단적으로 줄여야 할 때 (shadcn은 이미 가벼우므로 해당 없는 경우 많음)

5. 실제 적용 예시 (블로그 + 차트)

tsx

// shadcn Chart + 블로그 통계 위젯 예시
import { ChartContainer, ChartTooltip } from "@/components/ui/chart"
import { BarChart, Bar, XAxis, YAxis } from "recharts"

const chartConfig = {
  views: { label: "조회수", color: "hsl(var(--chart-1))" },
}

export function PostViewsChart({ data }) {
  return (
    <ChartContainer config={chartConfig} className="h-48">
      <BarChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <ChartTooltip />
        <Bar dataKey="views" fill="var(--color-views)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

CSS 변수(--chart-1)가 다크모드에서 자동으로 바뀌므로 별도 색상 분기 불필요.

6. 설치 순서

bash

# 1. Next.js + Tailwind (기존 스택)
npx create-next-app@latest --tailwind

# 2. shadcn/ui 초기화
npx shadcn@latest init

# 3. 필요한 컴포넌트만 추가
npx shadcn@latest add card badge pagination command
npx shadcn@latest add chart   # Recharts 기반 차트

결론

차트와 블로그를 함께 운영하는 사이트라면 shadcn/ui를 추가하지 않을 이유가 없다. Tailwind를 대체하는 게 아니라 위에 얹는 구조이고, 코드는 내 것이 되며, 차트 테마 통일 문제를 가장 깔끔하게 해결해준다.

Tailwind CSS vs shadcn/ui — 차트·블로그 사이트 기준 비교

1. 개념적 위치

2. 기능 비교

UI 컴포넌트

차트

블로그 특화 기능

3. 개발 속도 vs 자유도

4. 차트 + 블로그 사이트에 적합한 선택

추천: Tailwind + shadcn/ui 함께 사용

Tailwind만 고려할 경우

5. 실제 적용 예시 (블로그 + 차트)

6. 설치 순서

결론