Tailwind CSS, shadcn/ui, 2020년대 UI 개발의 표준

Tailwind CSS

2017년 Adam Wathan이 만든 utility-first CSS 프레임워크입니다. 미리 정의된 작은 클래스(flex, text-lg, p-4)를 조합해 디자인합니다.

<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
  <img class="w-12 h-12 rounded-full" />
  <div>
    <h3 class="text-lg font-semibold">제목</h3>
    <p class="text-sm text-gray-600">설명</p>
  </div>
</div>

장점:

• 속도: CSS 파일 안 만들고 HTML에서 즉시.
• 일관성: 미리 정해진 스케일.
• 번들 작음: 사용한 클래스만 빌드 결과에 포함 (purge).

단점은 HTML이 클래스로 빽빽해진다는 것입니다. 호불호가 갈립니다.

shadcn/ui

2023년 shadcn (Sad Bafna)이 만든 컴포넌트 라이브러리입니다. Radix UI와 Tailwind 기반입니다.

다른 라이브러리와 결정적 차이는 import 안 한다는 점입니다. 컴포넌트 코드를 본인 프로젝트에 복사해서 사용합니다.

npx shadcn add button

이 명령이 button 컴포넌트의 코드를 본인 프로젝트에 복사합니다. 본인 마음대로 수정할 수 있습니다.

장점:

• 외부 의존성 없음: 라이브러리 업데이트 강제 안 됨.
• 완전 커스터마이즈: 코드가 본인 것.
• 접근성 자동: Radix UI 기반.

2023~2024년 React 개발자 사이의 폭발적 인기를 얻었습니다. 현재 사실상 표준입니다.

Anti-card와의 관계

Freeive의 anti-card도 shadcn 스타일을 일부 따릅니다. Tailwind 기반에 복사 가능한 코드입니다. 다만 디자인 철학(anti-card 5원칙)이 추가됐습니다.

바이브 메이커가 챙길 한 가지

React + Tailwind + shadcn/ui 조합이 2024년 1인 랩의 가장 빠른 시작점입니다. 일주일 안에 작동하는 SaaS를 만들 수 있습니다.

관련

Component library · Design tokens · Material Design