설치

프로젝트 만들기Copy Anchor Link

Tailwind CSS v4 를 쓰는 React 프로젝트를 준비해요. 새로 만든다면 Vite 가 가장 간단해요.

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm add tailwindcss @tailwindcss/vite

vite.config.ts 에 Tailwind 플러그인과 @ 경로 별칭을 추가하고, CSS 파일 맨 위에 @import "tailwindcss"; 를 넣어요. 자세한 내용은 shadcn Vite 설치 문서를 참고해요.

shadcn 초기화Copy Anchor Link

pnpm dlx shadcn@latest init

components.json 이 만들어지고 cn() 유틸(lib/utils.ts)과 기본 CSS 변수가 추가돼요. 기본 색(Base color)은 무엇을 골라도 다음 단계에서 브랜드 테마로 덮어써요.

브랜드 테마 설치Copy Anchor Link

브랜드 토큰을 CSS 변수와 Tailwind 테마로 추가해요. Clay(콘마켓 고객 앱)라면 clay-theme 을 설치해요.

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/clay-theme.json

이 아이템은 CSS 파일에 세 가지를 넣어요.

• :root / .dark 에 브랜드 토큰 값 (--rb-color-bg-brand-solid …)
• @theme inline 에 Tailwind 매핑 (bg-bg-brand-solid, p-x4, rounded-r2, text-t5 …)
• shadcn 별칭 (--primary, --background, --radius …) 을 브랜드 토큰 값으로

폰트 설정 (선택)Copy Anchor Link

Clay 는 Pretendard 를 기본 글꼴로 써요. 폰트 파일은 테마에 포함되지 않으니 CSS 파일 맨 위(@import "tailwindcss"; 보다 앞)에서 직접 불러와요.

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

body 에 font-sans 를 적용하면 브랜드 글꼴(--rb-font-sans)이 쓰여요.

컴포넌트 추가Copy Anchor Link

필요한 컴포넌트를 하나씩 추가해요. 의존하는 컴포넌트와 npm 패키지는 자동으로 함께 설치돼요.

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/action-button.json

import { ActionButton } from '@/components/ui/action-button';

export default function App() {
  return (
    <div className="flex gap-x2 p-x4">
      <ActionButton variant="neutralWeak">취소</ActionButton>
      <ActionButton>확인</ActionButton>
    </div>
  );
}

전체 목록은 Components 에서 볼 수 있어요.